Как применить стили для иконки, если отрисовывать ее через тег object (использую реакт)?

Question

[pabadm]

Хочю поменять иконке заливку на красную. Соответственно дал object класс, в котором написано fill: red;.
Но оказалось, что, чтобы применить хоть какие-то стили, нужно иконке в начало документа прописать путь к ксс файлу. Где этот файл должен находится, нужно ли его как-то обрабатывать вебпаком не понятно.
И самое главное - в том файле нужно прописывать классы. И вот незадача - как теперь тот класс применить к иконке через тег object ?
В интернете по этому поводу нет ничего. Везде написано, что можно юзать тег object, а в примерах везде используют инлайн.

Answer 1

[Арсений Матыцин]

Ммм... Скорее всего тебе будет проще, если картинка будет встроена в документ (HTML) или лежать в ассетах, куда ты будешь обращаться с помощью use и доставать спрайт. Если все сделать правильно, то геморроя минимальное количество и можно спокойно встраивать сколько угодно раз и как угодно.

Можешь глянуть на грубом компактном примере. В нем конечно же нет встраивания из внешнего файла, но понимая что гуглить нагуглишь.

Comments

[pabadm]

Спасибо, по вашей ссылке можно самому классный inine svg написать, но я уже нашел способ все это сделать более интересно. Нашел классный загрузчик .svg файлов - @svgr/webpack. Благодаря нему, можно импортить .svg как компонент реакта. Очень удобно.
И, что самое главное, он всем тегам в файле svg с классом дает класс .nameOfFile_svg__className. То есть анимацию можно прописывать в любом файле стилей.
Возможно это и дикий костыль, ибо я использую модульные стили, а анимацию придется прописывать в файле специальном, но других более удобных вариантов не нашел.
Да и тем более, я хотел все делать через тег object для поддержки браузера, который не поддерживает иконки. Но оказалось, что можно просто в файл svg закинуть текст какой-то(юникод, который похож на иконку например), что-бы он отображался в случае не совместимости(не знаю почему, но даже в проекте чисто для себя хочется все учесть, не смотря на то, что 90% пользователей(которых не будет)могут видеть svg)

P.S. не знаю даже, зачем я вам это пишу)

[Арсений Матыцин]

pabadm, я тоже не понял, зачем. Наверное пообщаться, если так, залетай в чат (в профиле ссылка).