Імпорт SVG - “React компонент”
Scalable Vector Graphics, або SVG, є популярним вибором для іконок та графіки в онлайн-застосунках. Однією з проблем, з якою стикаються розробники, є динамічна зміна кольорів SVG. Це можна елегантно реалізувати в React, використовуючи можливості зовнішніх CSS та синтаксис React компонента.
Ось як можна динамічно стилізувати SVG за допомогою React.
Чому варто використовувати SVG?
SVG має кілька переваг:
Масштабованість: Вони виглядають чудово на різних розмірах екранів та з різною роздільною здатністю.
Легкість: У порівнянні з графічними файлами, SVG часто мають менший розмір.
Кастомізованість: Ви можете використовувати CSS або інлайн стилі для зміни кольорів, розмірів та форм.
Звичний спосіб: Імпорт SVG як тегу img
Спочатку, коли я почав працювати з SVG, я імпортував їх у React ось так:
Імпорт SVG у тег img
Цей спосіб добре працює для відображення зображення, але є велике обмеження: ви не можете динамічно змінювати колір SVG за допомогою CSS.
Після кількох годин пошуків в інтернеті, я нарешті знайшов просте і ефективне рішення: імпорт SVG як React компонента.
Переломний момент: Імпорт SVG як React компонента
Замість того, щоб імпортувати SVG як файл, ви можете імпортувати його як React компонент і стилізувати його динамічно.
Крок 1: Імпортуйте SVG як React компонент
Імпорт React компонента
Крок 2: Використовуйте SVG компонент з класом
Тепер ви можете використовувати SVG як React компонент і додавати до нього className:
Використання імпортованого React компонента в JS файлі
Крок 3: Визначте стилі у зовнішньому CSS файлі
Стилізуйте клас custom-icon у вашому CSS файлі за допомогою властивості fill:
Додавання CSS
Крок 4: Видаліть атрибут fill з файлу SVG
Для того, щоб динамічне стилізування працювало, переконайтесь, що ви видалили всі fill атрибути з тегу `` або його дочірніх елементів у файлі SVG.
Видалення fill з файлу SVG
Крок 5: Імпортуйте CSS файл
Нарешті, переконайтесь, що ваш CSS файл підключений до React компонента
Фінальний код
Чому видалення атрибута
fillє важливим
Стилі CSS, що застосовуються через властивість fill, будуть перекриті, якщо у файлі SVG вже є атрибут fill.
Видаляючи атрибутfill, ви надаєте CSS динамічний контроль над кольором SVG.
Вивід
Чому цей підхід такий чудовий?
- Динамічне стилізування: Легко змінюйте кольори, розміри та ефекти при наведенні за допомогою CSS.
- Перевикористовувані компоненти: Застосовуйте різні стилі до одного й того ж SVG, змінюючи
className. - Чистий код: Тримайте вашу кодову базу чистою, розділяючи стилі та компоненти.
Якщо вам важко було динамічно стилізувати SVG, цей підхід змінить гру. Спробуйте його та розкрийте повний потенціал SVG в React!
Чи було це корисно? Дайте знати, як це працює для ваших проєктів!
Перекладено з: How to Dynamically Change SVG Colors in React Using React Component