vue3使用SVG矢量图标

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

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

安装SVG依赖插件

pnpm install vite-plugin-svg-icons -D

在vite.config.ts中配置插件

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {
  return {
    plugins: [
    
      createSvgIconsPlugin({
        // Specify the icon folder to be cached
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',
      }),
      
      
    ],
  }
}

入口文件main.ts导入

//svg插件需要配置代码

import 'virtual:svg-icons-register'

---

使用

1.在目录创建文件夹'src/assets/icons'

阿里巴巴图标

在icons下保存下载的svg 名字格式：name.svg

<template>
  <div>
    <h1>SVG测试</h1>
    
    <!-- svg:图标外层容器节点，内部需要与use标签结合使用 -->
    <svg style="width: 20px; height: 20px">
      <!-- xlink: href=# icon-图标名字 -->
      <!-- // use标签的fill属性可以设置图标的颜色 -->
      <use xlink:href="#icon-lock" fill="green"></use>
    </svg>
    
  </div>
</template>
<script lang="ts" setup></script>

<style scoped></style>

3.4.1svg封装为全局组件

好处：动态传参，直接使用

//新建./components/SvgIcon/index.vue'

<template>
  <div>./components/SvgIcon/index.vue'
    <h1>SVG测试</h1>
    <svg-icon name="lock" color="pink" width="48px" height="48px"></svg-icon>
  </div>
</template>
<script lang="ts" setup>
import SvgIcon from './components/SvgIcon/index.vue'
</script>

<style scoped></style>

<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>

自定义插件

这样无需引入，只需注册一次

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

//引入项目中的全局组件
import SvgIcon from './SvgIcon/index.vue'
import type { App, Component } from 'vue'
const components: { [name: string]: Component } = { SvgIcon }
export default {
  install(app: App) {
  //注册项目全部的全局组件
    Object.keys(components).forEach((key: string) => {
    //注册为全局组件
      app.component(key, components[key])
    })
  },
}
//对外暴露插件对象

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

vue3中是 app.component
// SvgIcon注册为全局组件，其他不用引入就能使用
// import SvgIcon from './components/SvgIcon/index.vue'
// app.component('SvgIcon', SvgIcon)

vue3中是 vue.component

//但要考虑长久，components里可能有多个组件，一次次的在main.ts引入有些麻烦，利用自定义插件
//引入自定义插件对象,注册整个项目的全局组件
import globolComponent from './components/index'
//安装自定义插件对象
app.use(globolComponent)
// console.log(globolComponent)

在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>