svg 图标组件封装配置

1. 安装插件

pnpm install vite-plugin-svg-icons -D

这个插件主要的作用就是将图标整合成雪碧图,用来优化性能, 减少请求次数。

2. 配置插件

// #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))
        }
    }
})

3. 从main.ts导入

// mark
import 'virtual:svg-icons-register'
import 'vant/lib/index.css'

使用:

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

有些图标可以根据 style 中 color 的值来设置颜色，图标是否有这个功能取决于 UI 做图片时否开启。

使用方法：

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