Лучше
создавать спрайт и добавлять его в документ, а иконки забирать по 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, тут лишь для примера. Подобные компоненты легко реализуются и без использования этой библиотеки.
