Как менять цвет внешнего SVG?

Question

[KononovD]

Здравствуйте. Есть кнопка, внутри которой текст и svg-картинка. SVG внешний, инлайново не хочу вставлять. Каша в jsx получится.

Нужно сделать так, что бы картинка, когда кнопка disabled - становилась белой. С инлайновым SVG проблем не возникло, по селектору к path добрался и сделал ему fill: #fff. А вот импортируя эту картинку - не знаю что делать.. <embed> не помог ( хотя я его может и не так использовал).

Comments

[Rustam Bainazarov]

Никак. SVG в таком варианте как за витриной — можно смотреть, но не потрогать нельзя (не моя аналогия).

Покажите код, как вы грузите, кстати.

В будущем станет возможно. Появится аналог #use в CSS, но не сейчас.

[RAX7]

CSS фильтрами можно https://css-tricks.com/the-many-ways-to-change-an-...

[Rustam Bainazarov]

RAX7, не учи плохому :))

Но это на самом деле как вариант.

[KononovD]

Рустам Байназаров,

import React, { Component } from 'react';
import './index.styl';
import googleIcon from '../../../public//img/icons/google.svg';
import facebookIcon from '../../../public//img/icons/facebook.svg';

class MainButton extends Component {

  render () {
    const {
      text = '',
      onClick = () => { },
      disabled = false,
      type = ''
    } = this.props;

    const className =
      type === 'google' ? 'main-button__google' :
        type === 'facebook' ? 'main-button__facebook' :
          'main-button__default';

    const img =
      type === 'google' ?
        <embed className="main-button__icon" src={ googleIcon } alt={ 'fecebook logo' } /> :
        type === 'facebook' ?
          <embed className="main-button__icon" src={ facebookIcon } alt={ 'fecebook logo' } /> :
          null;

    return (
      <button className={ `main-button ${className}` } disabled={ disabled } onClick={ onClick }>
        { img }
        { text }
      </button>
    );
  }
}

export default MainButton;

Ближе к первым версиям страниц - эти импорты поменяются на нормальные относительные пути) сторибук иначе не хочет работать)

[KononovD]

да-да-да, тройные тернарники - дикий бред, но тут это то же самое, что и свитч-кейс :DD
мне кажется

[Rustam Bainazarov]

KononovD, я больше про финальный вывод.

Но я понял, что вы через тег embed. Да, это жёсткий метод.

[KononovD]

Рустам Байназаров, думал, что через embed можно получить содержимое svg и манипулировать им) Мне кажется, костыльный фильтр лучше, чем еще одна, белая, иконка)
Спасибо

[KononovD]

RAX7, Спасибо)

[RAX7]

KononovD, есть еще вариант спрайт собрать и менять background-position в зависимости от класса на кнопке
типа такого https://jsfiddle.net/RAX7/wy0jcbtq/

[KononovD]

RAX7, пробовал когда-то со спрайтами работать, но спрайт - как ни крути - 2 и более картинок. Да, весят они не на много больше одной картинки. Да, у всех сейчас 3g, lte интернет на телефонах и можно грузить сколько-угодно много контента, но это не мой подход)

[wisgest]

SVG в таком варианте как за витриной

Рустам Байназаров, разве с SVG в

<object type="image/svg+xml" data="file.svg"></object>

нельзя делать всё, что хочешь? (Через CSS в содержащем документе, скорее всего, нельзя, а через JS очень даже можно.)

Answer 1

[Антон Спирин]

В чем проблема заюзать что-нибудь вроде svg-sprite-loader и забыть о проблеме? Сегодня вам надо добавить одну иконку, а завтра их может быть 10.

Comments

[KononovD]

пробовал когда-то со спрайтами работать, но спрайт - как ни крути - 2 и более картинок. Да, весят они не на много больше одной картинки. Да, у всех сейчас 3g, lte интернет на телефонах и можно грузить сколько-угодно много контента, но это не мой подход)
Конкретно в этом случае пользовать спрайты нет смысла, ибо иконка может быть либо цветная, либо белая)

[Антон Спирин]

KononovD, этот лоадер добавляет картинки тегом symbol в svg контейнере, далее происходин инъекция в html код и иконки используются тегом use с доступом по id. Но в исхдном коде вы этого не видите, вы просто делаете импорт и используете:

import twitterLogo from './logos/twitter.svg';

const Example = () => (
  <svg viewBox={twitterLogo.viewBox}>
    <use xlink:href={`#${twitterLogo.id}`} />
  </svg>
);

Кроссбраузерно при таком использовании можно менять иконке два цвета: fill и color.

Само собой удобно вынести повторяющийся код в контейтер:

const Svg = ({ src, className }) => (
  <svg className={className} viewBox={src.viewBox}>
    <use xlink:href={`#${src.id}`} />
  </svg>
);

И использовать потом в коде просто:

import twitterLogo from './logos/twitter.svg';
import Svg from 'app-components/core/Svg';

const Example = () => (
  <Svg src={twitterLogo} />
);

[KononovD]

Антон Спирин, Понял, спасибо)) Полезная штука

[KononovD]

Антон Спирин, что-то не получается с этой штукой:
в конфиг вебпака добавил вот это

{
      test: /\.svg$/,
      loader: 'svg-sprite-loader',
      options: {}
    }

Сделал отдельный компонент для svg:

import React from 'react';

const Svg = ( { src, className = 'icon', ...props } ) => {
  console.log( src.id, src.viewBox );
  return (
    <svg className={ className } viewBox={ src.viewBox } { ...props }>
      <use xlinkHref={ `#${src.id}` } />
    </svg >
  )
};

export default Svg;

И использую вот так:

import googleIcon from '../../../public//img/icons/google.svg';
import Svg from '../Svg';


class MainButton extends Component {

  render () {
    const {
      text = '',
      onClick = () => { },
      disabled = false,
      type = 'default'
    } = this.props;

    const img = <Svg src={ googleIcon } className="main-button__icon"/>;
      return (
        <button className={ `main-button main-button__${type}` } disabled={ disabled } onClick={ onClick }>
          { img }
          { text }
        </button>
      );
   }
}

и на страницу мне приходит вот это:

<svg class="main-button__icon">
  <use xlink:href="#undefined"></use>
</svg>

[Антон Спирин]

KononovD, там надо инъекцию делать любым удобным способом. Посмотрите пример с runtime browser sprite в документации.

Answer 2

[Eduard07]

<svg>
<use xlink:href="sprite.svg#icon">
</svg>