vite-svg-loader

是什么

• 官方介绍：Vite plugin to load SVG files as Vue components, using SVGO for optimization. （使用 ​vite-svg-loader​ 的核心目的是将 SVG 文件转换为 ​可直接交互的 Vue/React 组件，从而在项目中更灵活、高效地管理和使用 SVG。）

为什么

在vite中直接import svg文件时，获取到的是一个URL路径。(参考vite静态资源引入)

import imgUrl from './img.png' 
document.getElementById('hero-img').src = imgUrl

imgUrl 在开发时会是 /img.png，在生产构建后会是 /assets/img.2d8efhg.png

怎么做

• 安装

npm install vite-svg-loader --save-dev

• 在vite.config.js中配置

import svgLoader from 'vite-svg-loader'

export default defineConfig({
  plugins: [vue(), svgLoader()]
})

使用

URL

SVGs can be imported as URLs using the ?url suffix:

import iconUrl from './my-icon.svg?url'
// 'data:image/svg+xml...'

Raw

SVGs can be imported as strings using the ?raw suffix:

import iconRaw from './my-icon.svg?raw'
// '<?xml version="1.0"?>...'

Component

SVGs can be explicitly imported as Vue components using the ?component suffix:

import IconComponent from './my-icon.svg?component'
// <IconComponent />

默认配置

当不提供明确的参数时，使用以下默认配置

svgLoader({
  defaultImport: 'url' // or 'raw'
})

配置SVGO

• SVGO是什么

SVGO（SVG Optimizer）是一个用于优化 SVG 文件的工具。它通过移除不必要的元素、压缩数据和简化结构来减少文件大小，从而提高加载速度和性能。SVGO 支持多种优化选项，可以根据具体需求进行配置。以下是一些常见的优化功能：

1. 移除不必要的元素：如注释、元数据、隐藏的元素等。
2. 压缩数据：通过压缩字符串和数值来减少文件大小。
3. 简化路径：通过合并路径、删除冗余点等方式简化 SVG 路径。
4. 转换颜色：将颜色转换为更简洁的格式，如十六进制颜色。
5. 移除未使用的元素：如未使用的样式、脚本和字体。

• 配置SVGO

svgLoader({
  svgoConfig: {
    multipass: true
  }
})

• 关闭SVGO

svgLoader({
  svgo: false
})

• 对于某个单独的文件跳过SVGO优化

import IconWithoutOptimizer from './my-icon.svg?skipsvgo'
// <IconWithoutOptimizer />