Что такое Iconify? Как интегрировать Iconify в Vue. приложение
Лучшее веб-приложение — это текстовая и графическая галерея. В дополнение к эстетическому ощущению, которое фотографии привносят в веб-приложения, они также предоставляют визуальные подсказки и улучшают взаимодействие пользователей с приложением.
Iconify — это платформа значков, которая предоставляет крупномасштабную коллекцию значков SVG из различных пакетов значков, включая значки Bootstrap и Material Design. Iconify поддерживает различные интерфейсные JavaScript-фреймворки, что делает его гибким решением для добавления значков в веб-приложения.
Как интегрировать Iconify в Vue. Программы
Вы можете использовать Iconify в приложениях Vue с помощью пакета @iconify/vue npm. Этот пакет интегрирует Vue для платформы значков Iconify.
@iconify/vue предоставляет удобное решение для использования значков в приложениях Vue. Этот пакет позволяет быстро добавлять и настраивать иконки в вашем проекте. Чтобы установить @iconify/vue в ваше приложение Vue, выполните следующую команду npm в терминале корневого каталога приложения.
npm установить –save-dev @iconify/vue
Эта команда устанавливает пакет @iconify/vue, который зависит от разработки в приложении Vue.
Этот пакет будет работать только для трех приложений, которые вам нужно отслеживать в этом примере. Этот пакет не поддерживает приложения Vue 2. Однако, чтобы использовать Iconify в Vue 2, просто выполните следующую команду npm:
npm установить @iconify/vue2
Поскольку Vue 2 больше не поддерживается с 31 декабря 2023 г., вам следует узнать, как использовать Vue 3 и его функции. Это гарантирует, что вы всегда будете в курсе самой последней и актуальной информации в сообществе Vue.
Как добавить иконку в файл Vue . компонент
Вы можете добавить иконки, импортировав компонент Icon из пакета в компонент Vue. Чтобы добавить значок, вставьте следующий код в командный блок компонента Vue:
После этого шага вы можете получить доступ ко всем значкам в библиотеке Iconify. Чтобы добавить значки, перейдите на веб-страницу Iconify. При навигации в Интернете вы будете вводить имя значка, необходимого в приложении.
На следующем изображении показаны результаты поиска значка галочки.
Затем вы можете выбрать нужный стиль значка проверки, щелкнув значок. Вы можете дополнительно настроить значок в полях «Цвет», «Размер», «Отразить» и «Повернуть».
В приведенных выше полях вы можете выбрать цвет, размер, положение и ориентацию значка. Затем используйте значок в своем приложении Vue, скопировав код компонента на веб-страницу.
Приведенный выше блок кода устанавливает красный цвет значка. Он также определяет высоту и ширину каждой стороны как 500 пикселей.
Предварительно просмотрев приложение, вы увидите изображение, похожее на изображение ниже:
Хотя добавление значков в приложение с помощью пакета @iconify/vue обычно несложно, но иногда все равно выдает ошибку. Некоторые распространенные проблемы включают ошибки предварительного рендеринга, сообщения об ошибках в DOM и отсутствие рендеринга Vue соответствующего элемента.
Эти проблемы возникают из-за времени процесса монтирования компонента, связанного с загрузкой иконки. Вы можете обойти это с помощью библиотеки unplugin-icons.
Добавьте иконки в unplugin-Icons. библиотека
Библиотека unplugin-icons предоставляет безошибочную альтернативу импорту и использованию значков непосредственно в ваших шаблонах.
Метод интеграции значков для обработки ошибок выделен @iconify/vue, гарантируя, что Vue автоматически включает каждый значок, который вы используете, в сопровождающее приложение.
Чтобы начать работу с библиотекой unplugin-icons, откройте терминал и установите библиотеку, выполнив следующую команду npm:
npm установить unplugin-иконки
После установки вам необходимо настроить инструмент сборки. Vue 3 использует Vite в качестве инструмента сборки. Перейдите к vite.config.js и настройте этот файл так, чтобы он выглядел точно так же, как блок кода ниже:
импортировать {fileURLToPath, URL} из ‘node:url’; импортировать {defineConfig} из ‘vite’; импортировать vue из ‘@vitejs/plugin-vue’; // экспорт по умолчанию defineConfig({ plugins: (vue(), Icons()), resolve: { alias: { ‘@’: fileURLToPath(new URL(‘./src’, import.meta.url)) } } } )
Приведенный выше блок кода описывает файл конфигурации Vite. Этот код импортирует плагин Icons из unplugin-icon/vite. Затем этот блок кода устанавливает Icons в качестве подключаемого модуля в массиве подключаемых модулей.
Вы можете установить всю иконку, чтобы максимизировать выбор значка. Чтобы установить все файлы значков, выполните следующую команду npm в терминале каталога приложения:
npm i -D @iconify/json
Этот код устанавливает все доступные наборы значков для Iconify. Размер установки этого пакета составляет около 200 МБ. Вы также можете установить только определенный набор значков вместо всех, чтобы уменьшить размер пакета:
npm i -D @iconify-json/ph
Приведенный выше код устанавливает только значок из набора значков Phosphor, который Iconify обозначает как ph .
После установки вы можете импортировать этот компонент значка в свое приложение Vue. Вы должны ввести имя значка в соответствии с соглашением ~icons/{set}/{iconName}, чтобы использовать значки в элементе.
Описание соглашения о вводе символов выглядит следующим образом:
- ~icons : Путь только к иконкам
- { set } : только коллекция иконок
- { iconName } : Указывает название значка в шашлычнице.
Пример, показывающий компонент ввода и использующий значок CheckFill:
Этот код показывает, как вводить имена значков в соответствии с соглашением ~icons/ph/check-fill. Кроме того, он также импортирует компонент значка CheckFill из набора значков Phosphor. Затем он устанавливает свойства цвета, ширины и высоты элемента в шаблоне Vue.
Предварительный просмотр приложения из приведенного выше блока кода даст тот же результат, что и изображение, которое вы видели ранее.
Iconify — ценная библиотека для приложений, созданных с помощью Vue, поскольку она позволяет легко интегрировать ее в интерфейс вашего приложения. Большая библиотека значков Iconify предоставляет лучшие возможности настройки для ваших приложений.
