Какво е Iconify и как да го интегрирате във Vue Apps?

Най-добрите уеб приложения всъщност са колекция от текст и изображения. Освен естетическото усещане, което изображенията предоставят на уеб приложението, те предоставят и визуални знаци и подобряват интереса на потребителите към приложението.

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

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

Можете да използвате Iconify във вашето приложение Vue с @iconify/vue npm пакет. Този npm пакет е интеграция на Vue за рамката на иконата Iconify.

@iconify/vue предоставя безпроблемен начин за използване на икони в приложенията на Vue. Този пакет ви позволява бързо да добавяте и персонализирате икони във вашия проект. Да инсталираш

@iconify/vue във вашето приложение Vue изпълнете следната команда npm в терминала на основната директория на вашето приложение:

npm install --save-dev @iconify/vue

Тази команда инсталира @iconify/vue опаковка като a зависимост от развитието във вашето приложение 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. За да добавите икона, преминете към Iconify уебсайт. При навигиране до уебсайта ще въведете името на иконата, от която се нуждаете във вашето приложение.

Следното изображение ви показва резултатите от търсенето на икона за отметка.

След това можете да изберете стила на иконата за проверка, от който се нуждаете, като щракнете върху иконата. Можете допълнително да персонализирате вашите икони, като предоставите Цвят, Размер, Обръщане, и Завъртете полета.

С тези полета можете да посочите необходимия цвят, размер, позиция и ориентация на вашата икона. След като персонализирате иконата си, вече можете да използвате компонента на иконата във вашето приложение Vue, като копирате кода на компонента на уеб страницата.

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

Кодовият блок по-горе задава цвета на иконата на червено. Той също така определя височината и ширината да бъдат 500 пиксела всяка.

Преглеждайки приложението, ще получите изображение, подобно на изображението по-долу:

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

Тези проблеми възникват поради времето на процеса на монтиране на компонента във връзка със зареждането на икони. Можете да разрешите този проблем с unplugin-икони библиотека.

Добавяне на икони с библиотеката с икони на unplugin

The 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. Кодовият фрагмент импортира Икони плъгин от unplugin-icon/vite. След това кодовият блок се задава икони() като плъгин в добавки масив.

Можете да инсталирате всички набори икони, за да увеличите максимално своя избор на икона. За да инсталирате всички комплекти икони, изпълнете следната команда npm в терминала на директорията на вашето приложение:

npm i -D @iconify/json

Кодът инсталира всички набори икони, налични за Iconify. Инсталационният размер на този пакет е около 200 MB. Можете също така да инсталирате само определен набор от икони вместо всички набори, за да намалите размера на пакета:

npm i -D @iconify-json/ph

Кодовият фрагмент по-горе инсталира само икони от набора икони Phosphor, който Iconify обозначава с тел.

След инсталирането можете да импортирате компонента на иконата във вашето приложение Vue. Трябва да импортирате имена на икони с конвенцията ~икони/{set}/{iconName} за да използвате иконите във вашите компоненти.

Описанието на конвенцията за импортиране на икони е както следва:

• ~икони: Отнася се за пътя на иконата.
• { комплект }: Отнася се за набора или колекцията от икони.
• { iconName }: Отнася се за името на иконата в кутията за кебап.

Ето пример, показващ импортирането и използването на CheckFill компонент икона:

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

Този кодов фрагмент демонстрира как да импортирате имена на икони с конвенцията ~icons/ph/check-fill. Кодовият фрагмент импортира CheckFill компонент икона от набора икони Phosphor. След това задава атрибутите цвят, ширина и височина на компонента на иконата в шаблона Vue.

Визуализацията на приложението от горния кодов блок ще доведе до същото изображение на приложението, както е видяно преди.

Направете своите Vue приложения по-достъпни

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

Като разработчик на Vue трябва да направите своите уеб приложения достъпни за всички видове хора. Това е така, защото различните хора имат различни начини, по които могат да използват вашите приложения, например слепи и глухи хора. Научете инструменти, за да направите вашите уеб приложения лесно достъпни за тези хора.