svg 图标配置

安装与配置

安装

npm install vite-plugin-svg-icons -D

在 vite.config.ts 中配置插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入路径相关依赖 使用命名导入：规避Nodejs 内置模块没有默认导出的问题
import * as path from 'path'
// 引入svg支持插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        // svg 插件配置项
        createSvgIconsPlugin({
            // Specify the icon folder to be cached
            iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
            // Specify symbolId format
            symbolId: 'icon-[dir]-[name]',
        }),
    ],
    resolve: {
        alias: {
            '@': path.resolve('./src'), // 相对路径别名配置，使用 @ 代替 src
        },
    },
})

main.ts 中追加配置

将这两行代码放入 main.ts 中，这是 svg 配置的需要：

// main.ts
// svg 的配置代码
import 'virtual:svg-icons-register'

svg 图标的使用

以阿里云图标为例：

复制相关 svg 代码

如图：

新建存放 svg 图标的文件夹

目录结构如下所示：

project-root/
|
|-- src/
    |-- assets/
        |-- icons/
            |-- phone.svg  // svg 文件

直接使用 svg 图标

<template>
    <div>
        <h1>svg 测试</h1>
        <svg>
            <!-- 使用图标 -->
            <use xlink:href="#icon-phone"></use>
        </svg>
    </div>
</template>
<script lang="ts" setup></script>

<style scoped></style>

封装成组件使用 svg 图标

在项目的 commponents 文件夹📂下新建 SvgIcons 文件夹，并在其中新建 index.vue 组件

// index.vue
<template>
    <div>
        <svg :style="{ width, height }">
            <!-- 使用图标 -->
            <use :xlink:href="prefix + name" :fill="color"></use>
        </svg>
    </div>
</template>
<script lang="ts" setup>
defineProps({
    // xlink:href 属性前缀
    prefix: {
        type: String,
        default: '#icon-',
    },
    // 图标的名字
    name: String,
    // 图标的颜色
    color: {
        type: String,
        default: '',
    },
    // 图标大小
    width: {
        type: String,
        default: '16px',
    },
    height: {
        type: String,
        default: '16px',
    },
})
</script>

<style scoped></style>

引入并使用封装的 svg 图标

<template>
    <div>
        <h1>svg 测试</h1>
        <!-- svg 图标使用 -->
        <SvgIcon
            name="phone"
            color="#ad5565"
            width="60px"
            height="60px"
        ></SvgIcon>
    </div>
</template>
<script lang="ts" setup>
// 引入封装的图标组件
import SvgIcon from '@/components/SvgIcons/index.vue'
</script>

<style scoped></style>

温馨提示

上面提到的使用svg 组件的方法，如果面对多个组件需要注册使用，则比较麻烦，所以我们要把所有的组件一次性注册成全局组件来使用，请查看下一步！

自定义插件注册 svg 全局组件

新建 index.ts 自定义插件

project-root/
    |-- src/
        |-- components/
            |-- SvgIcons/
            |-- index.ts

index.ts

// 引入项目中全部的全局组件
import SvgIcon from './SvgIcons/index.vue'
// ... 其他组件

// 引入的组件是对象，将它们放在一个新的对象里
const allComponents: any = { SvgIcon }

// 对外暴露插件对象
export default {
    install(app: any) {
        // 注册项目的全部的全局组件
        Object.keys(allComponents).forEach((key) => {
            // 注册为全局组件
            app.component(key, allComponents[key])
        })
    },
}

main.ts 中安装自定义插件

// 引入自定义插件对象： 注册整个项目全局组件
import globalComponent from '@/components'
// 安装自定义插件
app.use(globalComponent)

无需引入，直接使用注册的全局组件

<template>
    <div>
        <h1>svg 测试</h1>
        <!-- svg 图标使用 -->
        <SvgIcon
            name="phone"
            color="#af2222"
            width="60px"
            height="60px"
        ></SvgIcon>
    </div>
</template>
<script lang="ts" setup></script>

<style scoped></style>