基于 vite-plugin-svg-icons 的 svg 图标组件方案

学完之后, 引入svg图标就这么简单, 快点学起来!!!

<cp-icon name="login-eye-on"></cp-icon>

<cp-icon name="login-eye-off"></cp-icon>

把 icons 文件夹中的图标打包成 svg 雪碧图，参考文档。

安装插件

pnpm install vite-plugin-svg-icons -D

配置插件

vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
// #1
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// #2
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        Components({
            dts: false,
            resolvers: [VantResolver({ importStyle: false })]
        }),
        // #3
        createSvgIconsPlugin({
            iconDirs: [path.resolve(process.cwd(), 'src/icons')]
        })
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

从main.ts导入

`import 'virtual:svg-icons-register`

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import pinia from './stores'
// mark
import 'virtual:svg-icons-register'

import 'vant/lib/index.css'
import './styles/main.scss'

const app = createApp(App)

app.use(pinia)
app.use(router)

app.mount('#app')

测试使用 svg 精灵地图

views/Login/index.vue

<svg aria-hidden="true">
    <!-- #icon-文件夹名称-图片名称 -->
    <use href="#icon-login-eye-off" />
</svg>

图标组件-封装 svg 组件

目标

把 svg 标签的使用封装成组件，完成密码的可见切换功能。

组件

<script setup lang="ts">
    // 提供 name 属性即可
    defineProps < {
        name: string
    } > ()
</script>

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

<style lang="scss" scoped>
    .cp-icon {
        // 和 font-size 一样大
        width: 1em;
        height: 1em;
    }
</style>

类型 types/components.d.ts。

mport CpNavBar from '@/components/CpNavBar.vue'
import CpIcon from '@/components/CpIcon.vue'

declare module 'vue' {
    interface GlobalComponents {
        CpNavBar: typeof CpNavBar
        CpIcon: typeof CpIcon
    }
}

测试使用

<cp-icon name="login-eye-on"></cp-icon>

<cp-icon name="login-eye-off"></cp-icon>