vue3实战-----封装和使用svg图标

在开发项目的时候经常会用到svg矢量图,使用SVG以后,页面上加载的不再是图片资源,这对页面性能来说是个很大的提升,我们SVG文件比img要小的很多,放在项目中几乎不占用资源。

1.安装和配置svg插件

安装SVG依赖插件:

npm 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入口文件导入：

//这是虚拟模块的引入方式，用于给脚手架插件在打包和开发时做相应的处理。
//Vite 和 Rollup 中都约定以 virtual: 作为虚拟模块的前缀：
import 'virtual:svg-icons-register'

2.解决引入虚拟模块失败的问题

如上引入了虚拟模块,可能会报错-----无法找到模块 ‘virtual:svg-icons-register’ 或其相应的类型声明。
在类型声明文件中追加配置:

declare module "virtual:svg-icons-register";

具体界面如下:

这时候文件就不爆红了。但这时候直接运行项目，可能会出现以下界面:

需要安装一下fast-glob插件:

 npm i fast-glob -D  

3.使用svg

进入阿里矢量图官网,随便选择一个矢量图,复制其代码:

新建phone.svg文件(路径必须与vite.config.ts中保持一致):

在phone.svg中粘贴刚才的svg代码:

然后去vue文件中测试一下:

<script setup lang="ts"></script>

<template>
  <div>
    <h1>svg测试</h1>
    <!-- svg是图标外层容器节点,内部需要结合use标签使用 -->
    <svg>
      <!-- xlink:href指定用哪一个图标,属性值必须是以"#icon-图标名字"的格式 -->
      <!-- fill可以设置图标的颜色 -->
      <use xlink:href="#icon-phone" fill="green"></use>
    </svg>
  </div>
</template>
<style scoped></style>

运行项目:

发现颜色未改变,这时候需要把phone.svg中的fill去掉:

刷新之后，颜色就改变了:

4.封装svg组件

新建svg组件文件:

components/SvgIcon/index.vue:

<template>
    <!-- svg:图标外层容器节点,内部需要与use标签结合使用 -->
    <svg :style="{ width, height }">
        <!-- xlink:href执行用哪一个图标,属性值务必#icon-图标名字 -->
        <!-- use标签fill属性可以设置图标的颜色 -->
        <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
</template>

<script setup lang="ts">
//接受父组件传递过来的参数
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组件:

<script setup lang="ts">
import SvgIcon from "./components/SvgIcon/index.vue";
</script>

<template>
  <div>
    <h3>svg测试</h3>
    <SvgIcon name="phone" color="pink" width="60" height="60"></SvgIcon>
  </div>
</template>
<style scoped></style>

运行项目发现组件生效:

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

svg在很多地方都会用到，直接把svg组件定义为全局组件更好。

上面components文件夹里面全部要注册为全局组件。需要在index.ts写以下代码:

//引入项目中全部的全局组件
import SvgIcon from './SvgIcon/index.vue'
import Pagination from './Pagination/index.vue'
import Category from './Category/index.vue'
//引入element-plus提供全部图标组件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
//全局对象
const allGloablComponent: any = { SvgIcon, Pagination, Category }
//对外暴露插件对象
export default {
  //务必叫做install方法
  install(app: any) {
    //注册项目全部的全局组件
    Object.keys(allGloablComponent).forEach((key) => {
      //注册为全局组件
      app.component(key, allGloablComponent[key])
    })
    //将element-plus提供图标注册为全局组件
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
      app.component(key, component)
    }
  },
}

然后再main.ts中挂载使用:

import gloablComponent from './components/index';
app.use(gloablComponent);

这样子一个自定义插件就完成了。