Iconify 란 무엇입니까? Vue 앱에 통합하는 방법
아이콘으로 Vue 앱을 향상시키고 싶으십니까? Iconify를 Vue 앱에 쉽게 통합하는 방법을 알아보세요.
최고의 웹 애플리케이션은 실제로 텍스트와 이미지의 모음입니다. 이미지는 웹 앱에 제공되는 미학적 느낌 외에도 시각적 단서를 제공하고 애플리케이션에 대한 사용자의 관심을 향상시킵니다.
Iconify는 Bootstrap 및 Material Design 아이콘을 포함하여 다양한 아이콘 팩의 대규모 SVG 렌더링 아이콘 컬렉션을 제공하는 아이콘 프레임워크입니다. Iconify는 다양한 프런트엔드 JavaScript 프레임워크를 지원하므로 웹 앱에 아이콘을 추가할 수 있는 다목적 솔루션입니다.
Vue 애플리케이션에 Iconify를 통합하는 방법
@iconify/vue npm 패키지를 사용하여 Vue 애플리케이션에서 Iconify를 활용할 수 있습니다. 이 npm 패키지는 Iconify 아이콘 프레임워크를 위한 Vue 통합입니다.
@iconify/vue는 Vue 앱 내에서 아이콘을 사용하는 원활한 방법을 제공합니다. 이 패키지를 사용하면 프로젝트에 아이콘을 빠르게 추가하고 사용자 정의할 수 있습니다. Vue 애플리케이션에 @iconify/vue를 설치하려면 앱 루트 디렉터리의 터미널에서 다음 npm 명령을 실행하세요.
npm install --save-dev @iconify/vue
이 명령은 Vue 애플리케이션의 개발 종속성으로 @iconify/vue 패키지를 설치합니다.
이 패키지는 이 문서의 후속 작업이 필요한 Vue 3 애플리케이션에서만 작동합니다. 패키지는 Vue 2 애플리케이션을 지원하지 않습니다. 그러나 Vue 2에서 Iconify를 사용하려면 다음 npm 명령을 실행하세요.
npm install @iconify/vue2
Vue 2는 2023년 12월 31일부터 더 이상 관리되지 않으므로 Vue 3 및 해당 기능을 사용하는 방법을 배워야 합니다. 이는 귀하가 Vue 커뮤니티에서 최신 정보와 관련성을 유지하도록 하기 위한 것입니다.
Vue 구성 요소에 아이콘을 추가하는 방법
Vue 구성 요소의 패키지에서 Icon 구성 요소를 가져와 아이콘을 추가할 수 있습니다. 아이콘을 추가하려면 Vue 구성 요소의 스크립트 블록에 다음 코드를 붙여넣습니다.
<script setup>
import { Icon } from '@iconify/vue'
</script>
이 단계가 끝나면 Iconify 라이브러리의 모든 아이콘에 액세스할 수 있습니다. 아이콘을 추가하려면 Iconify 웹사이트로 이동하세요. 웹사이트로 이동하면 애플리케이션에 필요한 아이콘 이름을 입력하게 됩니다.
다음 이미지는 확인 아이콘에 대한 검색 결과를 보여줍니다.
그런 다음 아이콘을 클릭하여 필요한 체크 아이콘의 스타일을 선택할 수 있습니다. 색상, 크기, 뒤집기 및 회전 필드를 제공하여 아이콘을 추가로 맞춤설정할 수 있습니다.
이 필드를 사용하면 아이콘의 필수 색상, 크기, 위치 및 방향을 지정할 수 있습니다. 아이콘을 사용자 정의한 후에는 이제 웹 페이지에서 구성 요소의 코드를 복사하여 Vue 앱에서 아이콘 구성 요소를 사용할 수 있습니다.
<template>
<Icon icon="ph:check-fill" color="red" width="500" height="500" />
</template>
위의 코드 블록은 아이콘 색상을 빨간색으로 설정합니다. 또한 높이와 너비를 각각 500픽셀로 지정합니다.
앱을 미리 보면 아래 이미지와 비슷한 이미지가 표시됩니다.
@iconify/vue 패키지를 사용하여 애플리케이션에 아이콘을 추가하는 것은 일반적으로 간단하지만 때때로 문제가 발생할 수 있습니다. 몇 가지 일반적인 문제로는 사전 렌더링 문제, DOM(문서 개체 모델)의 오류 메시지, 구성 요소가 제대로 렌더링되지 않는 Vue 등이 있습니다.
이러한 문제는 아이콘 로딩과 관련된 구성 요소 탑재 프로세스의 타이밍으로 인해 발생합니다. unplugin-icons 라이브러리를 사용하면 이 문제를 해결할 수 있습니다.
unplugin-Icons 라이브러리를 사용하여 아이콘 추가하기
unplugin-icons 라이브러리는 템플릿 내에서 직접 아이콘을 가져오고 사용할 수 있는 오류 없는 대체 방법을 제공합니다.
아이콘을 통합하는 이러한 접근 방식은 @iconify/vue로 강조된 문제를 해결하여 Vue가 번들 애플리케이션에 사용하는 각 아이콘을 자동으로 포함하도록 보장합니다.
unplugin-icons 라이브러리를 시작하려면 터미널을 열고 다음 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/
export default defineConfig({
plugins: [vue(), Icons()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
위의 코드 블록은 Vite 구성 파일을 나타냅니다. 코드 스니펫은 unplugin-icon/vite에서 아이콘 플러그인을 가져옵니다. 그런 다음 코드 블록은 Icons()를 plugins 배열의 플러그인으로 설정합니다.
모든 아이콘 세트를 설치하여 아이콘 선택을 극대화할 수 있습니다. 모든 아이콘 세트를 설치하려면 앱 디렉터리의 터미널에서 다음 npm 명령을 실행하세요.
npm i -D @iconify/json
이 코드는 Iconify에서 사용할 수 있는 모든 아이콘 세트를 설치합니다. 이 패키지의 설치 크기는 약 200MB입니다. 패키지 크기를 줄이기 위해 모든 세트 대신 특정 아이콘 세트만 설치할 수도 있습니다.
npm i -D @iconify-json/ph
위의 코드 스니펫은 Iconify가 ph로 표시하는 Phosphor 아이콘 세트의 아이콘만 설치합니다.
설치 후 아이콘 구성 요소를 Vue 앱으로 가져올 수 있습니다. 구성 요소에서 아이콘을 활용하려면 ~icons/{set}/{iconName} 규칙을 사용하여 아이콘 이름을 가져와야 합니다.
아이콘을 가져오는 규칙에 대한 설명은 다음과 같습니다.
- ~icons: 아이콘 경로를 나타냅니다.
- { set }: 아이콘 세트 또는 컬렉션을 나타냅니다.
- { iconName }: 케밥 케이스의 아이콘 이름을 나타냅니다.
다음은 CheckFill 아이콘 구성 요소 가져오기 및 사용을 보여주는 예입니다.
<script setup>
import CheckFill from "~icons/ph/check-fill"
</script>
<template>
<CheckFill color="red" width="500" height="500" />
</template>
이 코드 조각은 ~icons/ph/check-fill 규칙을 사용하여 아이콘 이름을 가져오는 방법을 보여줍니다. 코드 스니펫은 Phosphor 아이콘 세트에서 CheckFill 아이콘 구성요소를 가져옵니다. 그런 다음 Vue 템플릿에서 아이콘 구성 요소의 색상, 너비 및 높이 속성을 설정합니다.
위 코드 블록에서 애플리케이션을 미리 보면 이전에 본 것과 동일한 앱 이미지가 생성됩니다.
Vue 앱의 접근성을 높이세요
Iconify는 아이콘을 앱 인터페이스에 쉽게 통합할 수 있게 해주기 때문에 Vue 애플리케이션을 위한 귀중한 라이브러리입니다. Iconify의 방대한 아이콘 라이브러리는 애플리케이션에 더 나은 사용자 정의 옵션을 제공합니다.
Vue 개발자로서 당신은 모든 유형의 사람들이 접근할 수 있는 웹 애플리케이션을 만들어야 합니다. 이는 시각 장애인과 청각 장애인 등 사람들이 응용 프로그램을 사용할 수 있는 방법이 다르기 때문입니다. 이러한 사람들이 웹 앱에 쉽게 액세스할 수 있도록 하는 도구를 알아보세요.