@223606322
1 Вариант:
Создать под каждую иконку свой компонент («Close-icon.vue», «Menu-icon.vue», «Edit-icon.vue») и просто подключать как отдельный компонент.
2 Вариант:
Создать один компонент, например «Icons.vue», внутри добавить пропс name и через условные операторы рендерить необходимую иконку в зависимости от того, что лежит в пропс. Условно, если в пропс передали «close», то в компоненте «Icons.vue», через «v-if/v-else-if» рендерить ту, которая равна «close».
Может есть еще какие-то более лучшие варианты или готовые библиотеки?
Решения вопроса 4
@iljaGolubev
Ещё есть vite-svg-loader — подключается как плагин к vite и удобен тем, что можно из vite.config менять как импортировать файл (url или raw).
Можно написать свой компонент в который передавать имя иконки. Только не делайте свой 2-й вариант — его недостаток в том, что все иконки всегда загружаются в браузер даже если никогда не будут показаны.
через «v-if/v-else-if» рендерить ту, которая равна «close».
Если у вас всего 2-3 иконки — можно и так, но в общем случае — старайтесь не использовать длинные «портянки» if/else. Почти всегда можно обойтись без такого кода. (conponent is или defineAsyncComponent)
Ответы на вопрос 0