Заполнить внешний файл SVG в React

Это ответило на мой вопрос:

https://github.com/gilbarbara/react-inlinesvg

1. Вставьте CSS в документ SVG

   • Невозможно использовать ваши препроцессоры CSS (LESS, SASS)
   • Невозможно настроить таргетинг на родительские элементы (нажатие кнопки и т. д.)
   • Затрудняет обслуживание

2. Ссылка на файл CSS в вашем документе SVG

   • Совместное использование стилей с вашим HTML означает дублирование путей в вашем проекте, что затрудняет обслуживание
   • Отсутствие совместного использования стилей с вашим HTML означает дополнительные HTTP-запросы (и, вероятно, дублирование путей между разными SVG)
   • По-прежнему не удается настроить таргетинг на родительские элементы
   • Ваш SVG присоединяется к вашей внешней таблице стилей, что затрудняет повторное использование.

3. Вставьте SVG в свой HTML

   • Раздувает ваш HTML
   • Браузеры не могут кэшировать SVG между страницами.
   • Кошмар обслуживания

Но есть альтернатива, позволяющая обойти эти проблемы: загрузить SVG с запросом XHR, а затем встроить его в документ. Вот что делает этот компонент.

Я решил использовать inline-svg для реакции, но мне также рассказали о другом методе обертывания SVG в объект. Я ничего об этом не знаю, так как еще не пробовал, но перечислю это, чтобы пополнить коллекцию:

<object>
  <embed src = "/static/filename.svg">
</object>

Я бы посоветовал сделать код простым и рассматривать SVG как HTML. Таким образом вы избегаете изменения размера / stretch / config и множества других проблем с SVG / React.

Создайте общий компонент Icon,

const Icon = ({ name, children }) => (
    <svg className = {`icon icon-${name}`}>
        {children}
    </svg>
)

Создайте компонент Пользователь Icon,

const UserIcon = ({ fill }) => (
    // fill your inner svg code here, set fill to the correct react node
)

Включите внешнее изображение SVG с четырьмя строками кода:

<svg>
  <use xlinkHref = {'/images/logo.svg#Version-2'}>
  </use>
</svg>

В этом случае изображение SVG «logo.svg» будет иметь идентификатор с именем «Version-2». Часть после хеша «#» соответствует идентификатору в изображении SVG, который, конечно же, должен существовать.

Я знаю, что выгляжу немного затруднительно, но вот лучшее решение, которое я мог бы получить: используйте webpack file-loader, чтобы получить URL-адрес вашего svg и использовать его как маску css, к которой вы можете применить цвет фона и некоторые параметры размера:

const name = 'chevron-up';
const size = 16;
const url = require(`!file-loader!../../../vendor/my-icons/icons/${name}.svg`);

return
  <span style = {{
    height: size,
    width: size,
    display: 'inline-block',
    backgroundColor: backgroundColor || 'black',
    WebkitMask: `url('${url}') no-repeat 50% 50% / cover`,
    mask: `url('${url}') no-repeat 50% 50% / cover`,
  }} />
;

На данный момент у него есть пара вопросов совместимости, но он поддерживается большинством последних браузеров. Так что я думаю, мы должны принять будущее, мой друг!

https://developer.mozilla.org/fr/docs/Web/CSS/mask

Если вы используете приложение Create React, то самое простое решение - импортировать SVG как компонент React.

import { ReactComponent as User } from './icons/user.svg';

const View = () => <User />;

См. Больше в документации: https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files#adding-svgs