Неправильно ли создавать компонент vue для каждого значка svg?

Мне нравится использовать inline svg в своих проектах, потому что это дает мне отличный контроль над такими вещами, как ширина, высота, цвет заливки, ширина обводки и цвет обводки, используя css и js (реквизит). Обычно я создаю vue.js SFC (компонент одного файла) для каждой иконки SVG. Вот пример:

<!-- IconsArrowRight.vue -->
<template>
  <svg
    viewBox="0 0 14 14"
    fill="currentColor"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M7.57026 0.888947L5.98842 2.46006L9.4199 5.89117L0.333374 5.89117L0.333374 8.10895H9.4199L5.98842 11.5401L7.57026 13.1112L13.6681 7.00006L7.57026 0.888947Z"
    />
  </svg>
</template>

И тогда я бы использовал это так (я использую tailwindCSS для стилизации):

<template>
  <div>
    <IconsArrowRight class="w-8 h-8 text-blue-500" />
  </div>
</template>

Я использую более 50 иконок в своем проекте, и я создал компонент vue.js для каждой из них; Является ли плохой практикой с точки зрения производительности иметь так много компонентов только для значков? Должен ли я вместо этого использовать значки шрифтов или любой другой альтернативный метод?

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
1
0
37
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Скорее всего, либо используя svg в качестве компонента, либо в качестве значка шрифта с точки зрения производительности, я бы вообще не рассматривал никаких проблем. Vue.js — это фреймворк, который можно использовать для крупномасштабных приложений, и ваши компоненты совсем не тяжелые, они просто используют SVG.

Моим личным предпочтением было бы использование значков шрифтов, как вы упомянули, и использование компонента, который вы будете передавать в качестве реквизита значка шрифта, поэтому таким образом у вас будет 1 компонент для всех svgs.

Насчет стиля, снова используя реквизит, чтобы передать все стили и связать этот реквизит с :class

Я думаю, это было бы намного чище,

Ваше здоровье

Это лишает вас возможности быстро ctrl + shift + p перейти к конкретному файлу SVG и отладить/изменить его.

kissu 10.04.2022 12:29
Ответ принят как подходящий

Использование одного .vue файла для одного .svg совершенно нормально, IMO. Это не окажет большого влияния на производительность, просто создание приложения может занять немного больше времени, но ничего критичного, IMO.
Кроме того, использование его таким образом может иметь некоторую гибкость в некоторых редкие ситуации в отношении спецификации HTML.

Теперь, что касается наилучшего подхода, я бы, вероятно, посоветовал использовать @unocss/пресет-значки или любой пакет, основанный на Иконировать, просто потому, что он принесет вам все доступные и вообразимые значки на лету, без недостатков и с ОЧЕНЬ гибкой + хороший DX.
Вот статья в 4 частях, которые объяснят все причины этого подхода и то, как его можно универсально интегрировать в любое решение (даже если не используется решение Antfu).

Интересный Путешествие по иконам; есть также 100% собственный способ веб-компонентов: iconmeister.github.io

Danny '365CSI' Engelman 10.04.2022 18:01

Другие вопросы по теме