Как организовать передача состояния из react в svg?

Question

[danil_linkins]

Допустим у нас есть один svg файл. Я делаю inject файла в компонент через плагин и получаю на выходе ..., которым могу управлять.

Суть в том, что у иконки есть 4 возможных состояния, с анимацией между переходами в эти состояния.
Как лучше всего организовать данное управление?
Если я еще могу прописать анимацию прямо в svg, то с состоянием все труднее.

Есть ли какие то уже проверенные методы и способы?
Поскольку костылить на css несколько появляющихся и исчезающих файлом не практично, как я думаю. Даже для переиспользования будут трудности.

Answer 1

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

Лучше создавать спрайт и добавлять его в документ, а иконки забирать по id.
Компонент на примере Styled Components:

import React from 'react';
import styled from 'styled-components';

const SVG = styled.svg`
  display: inline-block;
  vertical-align: middle;
`;

const Icon = ({ name, ...props }) {
  if (!name) {
    throw new Error('Unknown icon name!');
  }
  return (
    <SVG {...props}>
      <use xlinkHref={`#icon-${name}`} />
    </SVG>
  );
}

export default Icon;

Cтилизованая иконка c разными состояниями:

import React from 'react';
import styled from 'styled-components';
import { Icon } from './components';

const StyledIcon = styled(Icon)`
  fill: ${props => props.state.fill};
`;

const Example = ({ iconState }) => <StyledSVG name="profile" state={iconState} />;

export default Example;

Styled Components, тут лишь для примера. Подобные компоненты легко реализуются и без использования этой библиотеки.

Comments

[danil_linkins]

А вот есть я буду подставлять из спрайта иконку с нужным мне состоянием, как можно будет сделать анимацию переходов от одного состояния к другому?

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

danil_linkins, нет, вы подставляете SVG в начальном нестилизованом состоянии и сверху накладываете любые стили.
Переходы просто:

const StyledIcon = styled(Icon)`
  width: 32px;
  height: 32px;  
  fill: red;
  transition: all .5s;

  &:hover {
    fill: blue;
  }
`;

В примере обычный css, его можно и классом элементу задать