vue3+vite+ts封装svg组件

原创

已于 2023-07-21 20:28:56 修改 · 873 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js #typescript

于 2023-07-21 20:27:48 首次发布

1、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]',
      }),
    ],
  }
}