vue 使用vite-plugin-svg-icons

安装

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>

 

posted @   Wchime  阅读(153)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示