前端项目学习记录1：svg图标的封装与使用

1.下载svg依赖

pnpm i vite-plugin-svg-icons -D

          还有一个，下面的不安装可能会报错

pnpm i fast-glob -D

2.vite.config.ts配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
//引入svg需要用到的插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig({
    //TODO
  plugins: [vue() , 
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]'
    })
  ],
    //END
  resolve:{
    alias:{
      "@":path.resolve(__dirname , "./src"),
    }
  }
})

3.main.ts配置

import { createApp } from 'vue'
import App from './App.vue'
//引入element-plus插件与样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
///
//引入element-plus国际化
//忽略当前文件ts类型检测，要不然打包会失败
//@ts-ignore 
import zhCn from 'element-plus/es/locale/lang/zh-cn.mjs'

//TODO
//引入svg配置文件
import 'virtual:svg-icons-register'

//引入自定义插件对象：注册整个项目全局组件
import globalComponent from '@/components'
createApp(App).use(ElementPlus,{ locale: zhCn }).use(globalComponent).mount('#app')
//END

4.文件夹创建

        assets -> icons -> ...svg

        assets里面创建icons文件夹，里面放.svg矢量图标（记得去色）

5.SvgIcon组件

        components -> SvgIconG -> index.vue

<template>
    <svg :style="{ width , height }">
        <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
</template>

<script setup lang='ts'>
defineProps({
    name: {
        type: String,
    }, 
    width: {
        type: String,
        default: '1em'
    }, 
    height: {
        type: String,
        default: '1em'
    }, 
    color: {
        type: String,
        default: '#333'
    }, 
    prefix: {
        type: String,
        default: '#icon-'
    }
})
</script>

<style scoped lang="scss">

</style>

6.自定义注册全局插件

        components里面创建index.ts

import SvgIconG from './SvgIconG/index.vue';
import ... from '...';
//全局对象
const allGlobalComponents :any = { SvgIconG , ... }
export default {
    install(app : any){
        Object.keys(allGlobalComponents).forEach(key => {
            app.component(key, allGlobalComponents[key]);
        })
    }
}

        然后在main.ts里面注册就行（方法在上面main.ts里面）