Хотите улучшить свои приложения Vue с помощью значков? Узнайте, как легко интегрировать Iconify в ваше приложение Vue.

Лучшие веб-приложения на самом деле представляют собой набор текста и изображений. Помимо эстетического ощущения, которое изображения придают веб-приложению, они также предоставляют визуальные подсказки и повышают интерес пользователей к приложению.

Iconify — это фреймворк для значков, предоставляющий большую коллекцию значков в формате SVG из различных пакетов значков, включая значки Bootstrap и Material Design. Iconify поддерживает различные интерфейсные JavaScript-фреймворки, что делает его универсальным решением для добавления значков в ваши веб-приложения.

Как интегрировать Iconify в ваше приложение Vue

Вы можете использовать Iconify в своем приложении Vue с помощью @iconify/vue нпм-пакет. Этот пакет npm представляет собой интеграцию Vue для инфраструктуры значков Iconify.

@iconify/vue обеспечивает простой способ использования значков в приложениях Vue. Этот пакет позволяет быстро добавлять и настраивать иконки в вашем проекте. Установить

instagram viewer
@iconify/vue в вашем приложении Vue выполните следующую команду npm в терминале корневого каталога вашего приложения:

npm install --save-dev @iconify/vue

Эта команда устанавливает @iconify/vue пакет как зависимость развития в вашем приложении Vue.

Этот пакет будет работать только с приложениями Vue 3, которые вам понадобятся для продолжения этой статьи. Пакет не поддерживает приложения Vue 2. Однако, чтобы использовать Iconify в Vue 2, выполните следующую команду npm:

npm install @iconify/vue2

Поскольку Vue 2 больше не будет управляться с 31 декабря 2023 года, вам следует научиться использовать Vue 3 и его функции. Это сделано для того, чтобы вы оставались в курсе последних событий и были актуальны в сообществе Vue.

Как добавить значки в ваши компоненты Vue

Вы можете добавить значки, импортировав Икона компонент из пакета в ваших компонентах Vue. Чтобы добавить значки, вставьте следующий код в блок сценария компонента Vue:

<scriptsetup>
import { Icon } from '@iconify/vue'
script>

После этого шага вы можете получить доступ ко всем значкам в библиотеке Iconify. Чтобы добавить значок, перейдите на Иконировать Веб-сайт. При переходе на веб-сайт вы вводите имя значка, который вам нужен в вашем приложении.

На следующем изображении показаны результаты поиска значка галочки.

Затем вы можете выбрать стиль значка проверки, который вам нужен, нажав на значок. Вы можете дополнительно настроить свои значки, предоставив Цвет, Размер, Подбросить, и Повернуть поля.

В этих полях вы можете указать требуемый цвет, размер, положение и ориентацию значка. После того, как вы настроили свой значок, теперь вы можете использовать компонент значка в своем приложении Vue, скопировав код компонента на веб-страницу.

<template>
<Iconicon="ph: check-fill"color="red"width="500"height="500" />
template>

Блок кода выше устанавливает цвет значка на красный. Он также указывает высоту и ширину по 500 пикселей каждая.

Предварительно просмотрев приложение, вы получите изображение, похожее на изображение ниже:

Хотя добавление значков в ваше приложение с помощью @iconify/vue package, как правило, прост, иногда это может привести к проблемам. Некоторые распространенные проблемы включают проблемы с предварительным рендерингом, сообщения об ошибках в Объектная модель документа (DOM), а Vue неправильно отображает компонент.

Эти проблемы возникают из-за синхронизации процесса монтирования компонента с загрузкой значков. Вы можете решить эту проблему с помощью unplugin-иконки библиотека.

Добавление значков с помощью библиотеки unplugin-Icons

unplugin-иконки библиотека предлагает альтернативный, безошибочный способ импорта и использования значков непосредственно в вашем шаблоне.

Такой подход к интеграции значков решает проблемы, отмеченные @iconify/vue, гарантируя, что Vue автоматически включит каждый значок, который вы используете в своем связанном приложении.

Чтобы начать работу с unplugin-иконки библиотеку, откройте терминал и установите библиотеку, выполнив следующую команду npm:

npm install unplugin-icons

После установки вам необходимо настроить инструмент сборки. Vue 3 использует Vite как инструмент сборки. Направляйтесь к vite.config.js и настройте файл так, чтобы он выглядел точно так же, как блок кода ниже:

import { fileURLToPath, URL } from'node: url'
import { defineConfig } from'vite'
import vue from'@vitejs/plugin-vue'
import Icons from'unplugin-icons/vite';
// https://vitejs.dev/config/
exportdefault defineConfig({
 plugins: [vue(), Icons()],
 resolve: {
 alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
 }
 }
})

В приведенном выше блоке кода показан файл конфигурации Vite. Фрагмент кода импортирует Иконки плагин от отключить-значок/vite. Затем кодовый блок устанавливает Иконки() как плагин в плагины множество.

Вы можете установить все наборы значков, чтобы максимизировать свой выбор значков. Чтобы установить все наборы значков, выполните следующую команду npm в терминале каталога вашего приложения:

npm i -D @iconify/json

Код устанавливает все наборы значков, доступные для Iconify. Размер установки этого пакета составляет около 200 МБ. Вы также можете установить только определенный набор значков вместо всех наборов, чтобы уменьшить размер пакета:

npm i -D @iconify-json/ph

Приведенный выше фрагмент кода устанавливает только значки из набора значков Phosphor, который Iconify обозначает с помощью ф.

После установки вы можете импортировать компонент значка в свое приложение Vue. Вы должны импортировать имена значков с соглашением ~icons/{set}/{iconName} чтобы использовать значки в ваших компонентах.

Описание соглашения об импорте значков выглядит следующим образом:

  • ~иконки: относится к пути к значку.
  • { набор }: относится к набору или коллекции значков.
  • {ИконкаИмя}: Относится к названию значка в шашлычнице.

Вот пример, показывающий импорт и использование ПроверитьЗаполнить компонент значка:

<scriptsetup>
import CheckFill from "~icons/ph/check-fill"
script>
<template>
<CheckFillcolor="red"width="500"height="500" />
template>

Этот фрагмент кода демонстрирует, как импортировать имена значков с использованием соглашения ~icons/ph/check-fill. Фрагмент кода импортирует ПроверитьЗаполнить значок из набора значков Phosphor. Затем он устанавливает атрибуты цвета, ширины и высоты компонента значка в шаблоне Vue.

Предварительный просмотр приложения из приведенного выше блока кода приведет к тому же изображению приложения, что и раньше.

Сделайте ваши приложения Vue более доступными

Iconify — ценная библиотека для ваших приложений Vue, поскольку она позволяет легко интегрировать значки в интерфейс вашего приложения. Обширная библиотека значков Iconify предоставляет лучшие возможности настройки для вашего приложения.

Как разработчик Vue, вы должны сделать свои веб-приложения доступными для всех типов людей. Это связано с тем, что разные люди могут использовать ваши приложения по-разному, например, слепые и глухие люди. Изучите инструменты, чтобы сделать ваши веб-приложения легко доступными для этих людей.