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

原创

已于 2025-03-21 15:10:09 修改 · 2.7k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue3实战 #typescript #前端 #svg图标

于 2025-02-13 15:00:33 首次发布

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

1.安装和配置svg插件
2.解决引入虚拟模块失败的问题
3.使用svg
4.封装svg组件
5.自定义插件注册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

进入阿里矢量图官网,随便

最低0.47元/天解锁文章

200万优质内容无限畅学