本文已参与「新人创作礼」活动，一起开启掘金创作之路
这篇文章介绍一些如何在vite项目中引入svg格式的图标

vite-svg插件

在github上有个比较宝藏的vite-svg插件，看代码仓库[github.com/vbenjs/vite…] 的介绍上说可以预加载svg，我们结合文档来整合一下这个插件

安装

在项目下执行这个命令

yarn add vite-plugin-svg-icons -D

使用

• 配置插件 在src下新建inons文件，然后修改vite.config.ts如下

...
import viteSvgIcons from 'vite-plugin-svg-icons'
...
// https://vitejs.dev/config/
export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  return {
  ...
    plugins: [
    ...
      viteSvgIcons({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/icons')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]'
      })
      ...
    ]
    ...
  }
}

这里的我只贴出了需要添加的代码，其他原有的代码就不贴了

• 在src/main.ts内引入注册组件

import 'virtual:svg-icons-register';

到这里 svg 雪碧图已经生成

vue项目使用svg

在src/components/icon下新建SvgIcon.vue然后使用下边的代码自定义一个组件

<template>
  <svg aria-hidden="true" class="svg-icon">
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'

export default defineComponent({
  name: 'SvgIcon',
  props: {
    prefix: {
      type: String,
      default: 'icon'
    },
    name: {
      type: String,
      required: true
    },
    color: {
      type: String,
      default: '#333'
    }
  },
  setup(props) {
    const symbolId = computed(() => `#${props.prefix}-${props.name}`)
    return { symbolId }
  }
})
</script>
<style lang="scss">
.svg-icon {
  width: 30px;
  height: 30px;
}
</style>

这里我们简单的看一下代码，在computed的时候，通过向svg-icon组件中的属性赋值，组件就可以知道use哪个icon。

图标库的获取

现在我们已经只写好了如何引入svg-icon图标，但是我们还没有icon。常言道巧妇难为无米之炊，我们使用阿里的矢量图标库iconfont[www.iconfont.cn/home/index?…] 随便找一个自己喜欢的图标点击下载。注册完成下载完对应的压缩包之后即可放在src/icon下等待引入

引入示例

例如我现在引入的一个图标是all.svg，我的代码可以如下

<template>
  <svg-icon name="all" />
</template>
<script setup lang="ts">
import SvgIcon from '../icon/SvgIcon.vue'
</script>

这里的图标样式的控制我放在svg-icon中了，如果想要修改大小的话，自行修改即可

最后，一点建议

如果是大型项目的话，引入了多个开源的图标库非常建议按照引入渠道分目录存放。例如阿里的图标统一放在/icon/alibaba目录下，万一icon改为商业可用的话，到时候也好处理

结语

vite搭建管理端模板的工作现在已经完成了。这几天下来可谓收获满满，踩坑多多。如果xdm有想集成其他的功能，可以在我的系类文章下留言。这个系列的文章暂时结束了。从明天开始，我就和大家介绍如何开发后端接口，各位前端的xdm有兴趣可以看一下。
欢迎关注我的掘金账号:juejin.cn/user/261290…
欢迎star我的git项目:gitee.com/liangminghu…
下篇预告：从头搭建一个api后端，基础环境准备。