0

Сейчас просто вставляю несколько иконок в файл 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 и т.п. Как автоматизировать и сделать удобнее?

2
  • 1
    Создай компонент Icon и в зависимости от пропса, например, name отдавай нужную иконку. Это один из вариантов. Ещё можно тупо импортировать нужную иконку как обычно это делается с пакетами (через file-loader). Можно еще поискать готовые npm пакеты иконок если не хочется изобретать велосипед. 14 мар 2019 в 10:44
  • А какое автоматизированное решение посоветуете, чтобы переводить атрибуты в реакт наименования, например из stroke-width в strokeWidth, а то в консоли после добавления иконки появляются ошибки, связанные с наименованиями
    – stiv
    15 мар 2019 в 5:48

1 ответ 1

1

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

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

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

    render: function() {
        return (
            <svg viewBox="0 0 120 120">
                <circle cx="60" cy="60" r="50"/>
            </svg>
        );
    }
    
  2. Вариант отправить рекат в пешее эротическое путешествие с его проверками:

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.