Блог

Для фона я пытаюсь загрузить значки SVG в свое приложение react и использую тег object, чтобы я мог легко манипулировать цветом значков.

В этом руководстве говорится:

Если вы хотите использовать внешние стили, с которыми в основном намного проще работать и поддерживать, вы не можете использовать или background-image . Если вы используете, вам необходимо ссылаться на свою таблицу стилей внутри SVG-файла (см. Следующий код). Помните: если вы сделаете это, SVG также не сможет узнать, что такое его родительский класс (т. Е. The ), поэтому Не пытайтесь использовать это в своем стиле. Встроенные SVG-файлы не нуждаются в этом добавлении, и поэтому с ними может быть немного проще работать в этом смысле.

и приведите этот пример кода:

 // Add to very start of SVG file before <svg>
<?xml-stylesheet type="text/css" href="style.css"?>
 

 // In style.css
.firstb { fill: yellow; }
.secondb { fill: red; }
 

Чтобы дать вам представление о том, как организованы мои файлы, моя src папка содержит assets папку вместе с моей components папкой. Мой style.scss файл src также находится в папке.

Мне трудно понять, что добавить в начало моих файлов svg. Я понимаю, что sass обычно компилируется style.scss style.css , однако, когда я смотрю на свои исходные тексты в инструментах разработки, они показывают, что style.scss они загружаются напрямую. Это только потому, что я все еще в режиме разработки?

В любом случае, я пробовал следующее (ни одно из которых не сработало):

<?xml-stylesheet type="text/css" href="./style.scss"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<?xml-stylesheet type="text/css" href="style.scss"?>

Было бы огромной помощью, если бы кто-нибудь знал, как я могу заставить это работать! Дайте мне знать, если есть какая-либо другая информация, которую я могу предоставить. Большое спасибо!

Вы правильно предположили, что вам нужно будет скомпилировать style.scss style.css , поэтому сначала убедитесь, что в SVG есть ссылки только на CSS. Это самый простой способ заставить это работать, но лучшим решением было бы импортировать ваши стили один раз в ваш корневой HTML-шаблон.

Теперь, если вы используете React, вполне вероятно, что вы также используете пакет, такой как webpack . Вы можете указать сборщикам, таким как webpack, обрабатывать импорт, отличный от JS, например, файлы Sass, с помощью загрузчиков. Существует sass-loader for webpack, который позволит вам импортировать файлы Sass, однако вам также может потребоваться добавить svg-inline-loader , чтобы вы могли импортировать SVG напрямую.

Я думаю, что с обоими загрузчиками произойдет то, что webpack начнет связывать ваше приложение React, увидит, что SVG импортирован, захватит его и увидит, что он ссылается на файл Sass, захватит файл sass и скомпилирует его, а затем выведет styles в вашем index.html файле. Пожалуйста, дайте мне знать, работает ли это решение для вас!

Я нашел обходной путь. Не совсем то, на что я надеялся, но это работает для меня.

Существует пакет react-svg, который обрабатывает ajax-запрос и извлекает svg в качестве обычного тега svg. Это позволяет мне редактировать с помощью моего файла sass.

https://www.npmjs.com/package/react-svg