Как работать с svg иконками в React?

116

27 ноября 2019, 14:50

Сейчас просто вставляю несколько иконок в файл Icons.js, и импортирую уже где необходимо. Вот пример иконки:

class IconPlus extends React.Component {
        static defaultProps = {
            width: '7',
            height: '7',
            stroke: '#d5d5d5',
            fill: '#000'
        }
        render() {
            return (
                <svg className="icon-plus" width={this.props.width} height={this.props.height} fill={this.props.fill}
                     stroke={this.props.stroke} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6.93 6.93">
                    <path stroke-linecap="round" stroke-miterlimit="10" strokeWidth="1.1" d="M3.47.55v5.83M6.38 3.47H.55"/>
                </svg>
            )
        }
    }

И появляются всякие неудобства: ошибки что атрибут stroke-linecap должен быть strokeLinecap и т.п. Как автоматизировать и сделать удобнее?

Answer 1

Если вы хотите смешивать SVG и JSX, то вам нужно некоторые аттрибуты переписать, как вы уже заметили.

Как этого не делать - вариантов несколько

Уберите xmlns="http://www.w3.org/2000/svg" и просто вставляйте собранную строку

render: function() {
    return (
        <svg viewBox="0 0 120 120">
            <circle cx="60" cy="60" r="50"/>
        </svg>
    );
}

Вариант отправить рекат в пешее эротическое путешествие с его проверками:
```
render: function() {
   return <span dangerouslySetInnerHTML={{__html: "<svg>...</svg>"}} />;
}
```
Хранить картинки отдельно, импортировать как модули и стилизовать их через css.