Есть несколько различных стратегий, которые следует учитывать, когда вы сталкиваетесь с задачей добавления значков SVG в приложение на основе Vue.js. Добавление их в виде встроенных SVG — это лишь один из способов, который может дать немного больше контроля над цветом и размером.
Мы рассмотрим, как создать простой <app-icon /> функциональный компонент, который предлагает согласованный способ загрузки SVG во всем приложении.
Требования
Предполагая, что вы использовали Vue CLI для создания своего приложения или у вас есть аналогичный рабочий процесс, включающий отдельные файловые компоненты и Webpack, вам просто нужно убедиться, что html-loader существует.
npm install --save-dev html-loader // or yarn add html-loader -D
Для библиотеки иконок SVG вам нужно поместить их в подкаталог, доступный кодовой базе. Кроме того, они должны иметь согласованное соглашение об именах, как показано ниже:
|-- src/
|-- icons/
|-- icon-alert.svg
|-- icon-cart.svg
|-- icon-email.svg
Также рекомендуется пропустить все SVG-файлы через оптимизатор, такой как SVGO, если они еще не оптимизированы.
AppIcon.vue
functional
Это очень простой компонент без состояния и методов, что является идеальным вариантом использования, чтобы сделать его функциональным компонентом.
Функциональные «глупые» компоненты не отображают экземпляры и могут снизить производительность, когда состояние (реактивные данные), методы и наблюдатели не нужны.
props
Сейчас компонент ожидает свойство icon, которое метод рендеринга будет использовать для загрузки значка.
рендеринг
Здесь компонент пытается загрузить содержимое SVG через html-loader и передает его функции createElement.
Использование
Следующие шаги
Отсюда вы можете расширить компонент, чтобы принять больше свойств и, кроме того, настроить span.app-icon, возвращаемый в методе render, в соответствии с вашими потребностями. Если у вашего приложения есть определенное руководство по брендингу, вы можете разработать стиль в соответствии с вашей темой и последовательно отображать его во всем приложении.
