2

Есть ли какой-то способ изменить цвет SVG файла если тот был импортирован из внешнего SVG файла? То есть <img src="[svgfile]"> не позволяет контроллировать цвет, а добавляя SVG код каждой иконки в React сильно замусорит его. Я пытаюсь понять как красиво и удобно импортировать все иконки в проект.

У меня сейчас примерно следующий код:

<buttonWrapper>
    <button iconBefore={facebookIcon}>Facebook</button>
</buttonWrapper>

facebookIcon должен быть строчный SVG элемент с своими параметрами и возможностью контроллировать цвет, так есть при наведении цвет будет меняться.

Я хочу получить что-то в этом роде:

import icon from "./icons/user.svg"

<icon fill="red" />

Пока что поиск ничего полезного не дал, многие варианты лишь портят структуру кода да и в принципе много вариантов я не нашел. Может кто подскажет что делать в такой ситуации?

Меня по сути интересует как удобно и гибко писать код что бы таких вопросов больше не возникало. Из-за большого колличества расширений в проекте уже сложная структура и усложнять ее дальше страшновато.

1 ответ 1

1

я Делал 2 варианта, и оба имеют право на жизнь

1 - выделить <BaseIcon /> - выставляет свойства svg, выводит чилда который svg

const ArrowUP = (props) => {
    return <BaseIcon {...props}>ВОТ ТУТ SVG код</BaseIcon>
}

всё это дело сложить в папочку Icons - разместить там файлик index.js с содержимым

export {default as ArrowUp} from 'путь к иконке ArrowUp';
export {default as ArrowDown} from 'путь к иконке ArrowDown';

в итоге импорт будет простым и приятным

import {ArrowUp, ArrowDown} from 'путь к папке Icons'
  • этот способ применён в MaterialUI

2 - Это запихнуть svg в шрифт и вот так будет выглядеть вызов <span className="arrowUP" />, т.к. иконка будет шрифтом, то цвет ширину линий можно будет без проблем регулировать

1
  • Я не понял каким образом сделать шрифт и что за функция в начале ответа. Это такую функцию создавать для каждой иконки? Не могли бы вы составить небольшой пример с 2-3 иконками с разными цветами, это был бы шикарный ответ!
    – Telion
    27 апр 2018 в 4:20

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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