vue 使用vite-plugin-svg-icons

Wchime發表於2024-06-15
VueVitePluginSVG

安裝

npm install vite-plugin-svg-icons --save
npm install fast-glob --save

在vite.config.js配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons';
import path from 'path'

function resolve(dir) {
  return path.join(__dirname, dir)
}
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
　　　　// 新建 assets/svg資料夾，將svg放入資料夾下
      iconDirs: [resolve('src/assets/svg')],
       // 定義每個 SVG 圖示的符號 ID
      symbolId: "icon-[name]"
    }),
  ],
}）

定義一個svgicon元件，新建SvgIcon.vue

<script setup>
const props=defineProps({
  // SVG 檔名稱
  name:{
    type:String,
    required:true,
  },
  // 額外類名
  className:{
    type:String,
    default:"",
  },
  // SVG 大小
  size:{
    type:Number,
    default:20,
  }
 
})
</script>

<template>
    <svg aria-hidden="true" :width="size" :height="size"  :class="` ${className}` ">
      <use :href="`#icon-${name}`" ></use>
    </svg>
  </template>

  <style scoped>
   
  </style>

重要的一步，在main.js中

import 'virtual:svg-icons-register'

全域性註冊元件

const app = createApp(App)
app.component('SvgIcon', SvgIcon)

使用

<SvgIcon name="圖示名" class="cls__svg" :size="25"></SvgIcon>

相關文章