Желите да побољшате своје Вуе апликације иконама? Научите како да без напора интегришете Ицонифи у своју Вуе апликацију.
Најбоље веб апликације су заиста збирка текста и слика. Осим естетског осећаја који слике пружају веб апликацији, оне такође пружају визуелне назнаке и побољшавају интересовање корисника за апликацију.
Ицонифи је оквир икона који пружа велику колекцију СВГ приказаних икона из различитих пакета икона, укључујући иконе Боотстрап и Материал Десигн. Ицонифи подржава различите фронт-енд ЈаваСцрипт оквире што га чини разноврсним решењем за додавање икона у ваше веб апликације.
Како интегрисати Ицонифи у вашу Вуе апликацију
Можете да искористите Ицонифи у својој Вуе апликацији помоћу @ицонифи/вуе нпм пакет. Овај нпм пакет је Вуе интеграција за Ицонифи оквир икона.
@ицонифи/вуе пружа беспрекоран начин коришћења икона унутар Вуе апликација. Овај пакет вам омогућава брзо додавање и прилагођавање икона у вашем пројекту. За инсталацију @ицонифи/вуе у вашој Вуе апликацији, покрените следећу нпм команду у терминалу основног директоријума ваше апликације:
npm install --save-dev @iconify/vue
Ова команда инсталира @ицонифи/вуе пакет као а развојна зависност у вашој Вуе апликацији.
Овај пакет ће радити само за Вуе 3 апликације које су вам потребне да пратите овај чланак. Пакет не подржава Вуе 2 апликације. Међутим, да бисте користили Ицонифи у Вуе 2, покрените следећу нпм команду:
npm install @iconify/vue2
Пошто се Вуе 2 више неће управљати од 31. децембра 2023. године, требало би да научите како да користите Вуе 3 и његове функције. Ово је да би се осигурало да останете у току и релевантни у Вуе заједници.
Како додати иконе својим Вуе компонентама
Можете додати иконе увозом Икона компоненту из пакета у вашим Вуе компонентама. Да бисте додали иконе, налепите следећи код у блок скрипте компоненте Вуе:
<scriptsetup>
import { Icon } from '@iconify/vue'
script>
Након овог корака, можете приступити свим иконама у библиотеци Ицонифи. Да бисте додали икону, идите на Ицонифи веб сајт. Приликом навигације на веб локацију, у апликацију ћете унети назив иконе која вам је потребна.
Следећа слика вам приказује резултате претраге за икону за потврду.
Затим можете одабрати стил иконе чека који вам је потребан кликом на икону. Можете додатно прилагодити своје иконе пружањем Боја, Величина, Флип, и Ротирај поља.
Помоћу ових поља можете одредити потребну боју, величину, положај и оријентацију иконе. Након што сте прилагодили своју икону, сада можете да користите компоненту иконе у својој Вуе апликацији тако што ћете копирати код компоненте на веб страници.
<template>
<Iconicon="ph: check-fill"color="red"width="500"height="500" />
template>
Блок кода изнад поставља боју иконе на црвену. Такође одређује висину и ширину по 500 пиксела.
Прегледајући апликацију, добићете слику сличну слици испод:
Иако додавање икона вашој апликацији са @ицонифи/вуе пакет је генерално једноставан, повремено може довести до проблема. Неки уобичајени проблеми укључују проблеме са унапред приказивањем, поруке о грешци у Модел објекта документа (ДОМ), а Вуе не приказује компоненту правилно.
Ови проблеми настају због времена процеса монтирања компоненте у односу на учитавање икона. Овај проблем можете решити помоћу иконе за искључивање библиотека.
Додавање икона помоћу библиотеке икона за откључавање
Тхе иконе за искључивање библиотека нуди алтернативни начин без грешака за увоз и коришћење икона директно унутар вашег шаблона.
Овај приступ интегрисања икона решава проблеме наглашене са @ицонифи/вуе, осигуравајући да ће Вуе аутоматски укључити сваку икону коју користите у вашој апликацији у пакету.
Да бисте започели са иконе за искључивање библиотеку, отворите свој терминал и инсталирајте библиотеку покретањем следеће нпм команде:
npm install unplugin-icons
Након инсталације, потребно је да конфигуришете свој алат за прављење. Вуе 3 користи Вите као алат за прављење. Идите на вите.цонфиг.јс и конфигуришите датотеку да изгледа тачно као блок кода испод:
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))
}
}
})
Горњи блок кода приказује конфигурациону датотеку Вите. Исјечак кода увози Иконе додатак из унплугин-ицон/вите. Блок кода се затим поставља иконе() као додатак у додаци низ.
Можете инсталирати све скупове икона да бисте максимизирали свој избор икона. Да бисте инсталирали све скупове икона, покрените следећу нпм команду у терминалу директоријума ваше апликације:
npm i -D @iconify/json
Код инсталира све скупове икона доступних за Ицонифи. Инсталациона величина овог пакета је око 200 МБ. Такође можете инсталирати само одређени скуп икона уместо свих скупова да бисте смањили величину пакета:
npm i -D @iconify-json/ph
Исечак кода изнад инсталира само иконе из скупа икона Пхоспхор, што Ицонифи означава са тел.
Након инсталације, можете да увезете компоненту иконе у своју Вуе апликацију. Морате да увезете имена икона са конвенцијом ~ицонс/{сет}/{ицонНаме} да бисте користили иконе у вашим компонентама.
Опис конвенције за увоз икона је следећи:
- ~иконе: Односи се на путању иконе.
- { комплет }: Односи се на скуп икона или колекцију.
- { ицонНаме }: Односи се на име иконе у кутији за ћевап.
Ево примера који показује увоз и употребу ЦхецкФилл компонента иконе:
<scriptsetup>
import CheckFill from "~icons/ph/check-fill"
script>
<template>
<CheckFillcolor="red"width="500"height="500" />
template>
Овај исечак кода показује како да увезете имена икона са конвенцијом ~ицонс/пх/цхецк-филл. Исјечак кода увози ЦхецкФилл компонента икона из скупа икона Пхоспхор. Затим поставља атрибуте боје, ширине и висине компоненте иконе у Вуе шаблону.
Преглед апликације из горе наведеног блока кода ће резултирати истом сликом апликације као што смо видели раније.
Учините своје Вуе апликације приступачнијим
Ицонифи је вредна библиотека за ваше Вуе апликације јер вам омогућава да лако интегришете иконе у интерфејс ваше апликације. Ицонифи-ова огромна библиотека икона пружа боље опције прилагођавања за вашу апликацију.
Као Вуе програмер, морате да учините своје веб апликације доступним свим врстама људи. То је зато што различити људи имају различите начине на које могу да користе ваше апликације, на пример, слепи и глуви људи. Научите алатке да својим веб апликацијама учините лако доступним овим људима.
