SVG图标配置

在开发项目的时候经常会用到svg矢量图，而且我们使用SVG以后，页面上加载的不再是图片资源,

这对页面性能来说是个很大的提升，而且我们SVG文件比img要小的很多，放在项目中几乎不占用资源。

# 步骤

安装
```
pnpm install vite-plugin-svg-icons -D
```
1

在vite.config.ts中配置插件

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // 图标放在这个路径下src/assets/icons
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // 图标名字
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

入口文件导入
```
import 'virtual:svg-icons-register'
```
1

测试使用

在'src/assets/icons下创建phone.svg
在phone.svg里面将在iconfont中复制的SVG代码粘贴进去

使用

<--svg图标外层容器节点，内部需要use标签结合使用-->
<svg>
    <--xlink:href执行用哪一个图标，属性值务必#icon-图标名字-->
	<use xlink:href=“#icon-phone” fill="yellow"></use>
</svg>

1
2
3
4
5

封装为全局组件

src/components目录下创建SvgIcon组件

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

<script setup lang="ts">
defineProps({
  //xlink:href属性值的前缀
  prefix: {
    type: String,
    default: '#icon-'
  },
  //svg矢量图的名字
  name: String,
  //svg图标的颜色
  color: {
    type: String,
    default: ""
  },
  //svg宽度
  width: {
    type: String,
    default: '16px'
  },
  //svg高度
  height: {
    type: String,
    default: '16px'
  }

})
</script>
<style scoped></style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

在src文件夹目录下创建一个index.ts文件：用于注册components文件夹内部全部全局组件

import SvgIcon from './SvgIcon/index.vue';
import type { App, Component } from 'vue';
const components: { [name: string]: Component } = { SvgIcon };
// 对外暴露插件对象
export default {
    // 务必叫做install方法
    install(app: App) {
        Object.keys(components).forEach((key: string) => {
            app.component(key, components[key]);
        })
    }
}

1
2
3
4
5
6
7
8
9
10
11
12

在入口文件引入src/index.ts文件,通过app.use方法安装自定义插件

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

1
2
3
4

上次更新: 2024/08/14, 04:14:33

← 编译配置详情 React Native沙盒环境安装→