vue3+vite에서 svg 아이콘을 사용하는 방법에 대한 심층 분석

svg 이미지는 프로젝트에서 널리 사용됩니다. 이번 글에서는 vue3 + vite에서 svg 아이콘을 사용하는 방법을 소개하겠습니다.

vite-plugin-svg-icons

• Preloading 프로젝트 실행 시 모든 아이콘 생성, DOM은 한 번만 작동하면 됩니다
• 고성능 캐시 내장, 파일이 수정되어야 다시 생성됩니다

(학습 영상 공유: vuejs tutorial)

Installation

node 버전: >=12.0.0 vite 버전: > = 2회

SvgIcon 구성 요소 만들기

/src/comComponents/SvgIcon/index.vue

yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D

icons 디렉터리 구조

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/icons')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]',

        /**
         * 自定义插入位置
         * @default: body-last
         */
        // inject?: 'body-last' | 'body-first'

        /**
         * custom dom id
         * @default: __svg__icons__dom__
         */
        // customDomId: '__svg__icons__dom__',
      }),
    ],
  }
}

• 글로벌 등록 컴포넌트

import 'virtual:svg-icons-register'

페이지 사용법

• <template>
    <svg aria-hidden="true" class="svg-icon" :width="props.size" :height="props.size">
      <use :xlink:href="symbolId" :fill="props.color" />
    </svg>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  const props = defineProps({
    prefix: {
      type: String,
      default: 'icon'
    },
    name: {
      type: String,
      required: true
    },
    color: {
      type: String,
      default: '#333'
    },
    size: {
      type: String,
      default: '1em'
    }
  })
  
  const symbolId = computed(() => `#${props.prefix}-${props.name}`)
  </script>

모든 SymbolId 가져오기

• # src/icons
  
  - icon1.svg
  - icon2.svg
  - icon3.svg
  - dir/icon1.svg

  (동영상 공유 학습: 웹 프론트엔드 개발, 프로그래밍 입문)

)

위 내용은 vue3+vite에서 svg 아이콘을 사용하는 방법에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!