Vite中使用 svg-sprite-loader加载svg文件
本文默认你们了解过 SVG,如果不懂会去 iconfont (opens new window) 下也行。
大家在使用Vue-Cli的时候,想要使用SVG,svg-sprite-loader 绝对是个火热的插件,它用相对优雅的方式帮我们解决了引入 SVG 文件的问题。
到了 Vite 上,由于不再使用 webpack进行打包,svg-sprite-loader不再可用,svg的插件又回到了百花齐放的阶段,其中最火的 vite-sprite-loader,但是他不支持 Sprite 技术(这里要提一下,关于 Sprite 可以看未来必热:SVG Sprite技术介绍 (opens new window)),对于开发UI库或公用上不太友好。
现有我开发UI库的要全面去webpack,所以在 SVG 碰到了一些问题,遂写了相应的 Rollup 插件(Vite就是基于Rollup打包),地址如下:rollup-plugin-svg-sprites (opens new window)
并不是造轮子,是看过其他相关的项目,都没有特别符合需求的。
# 简单示例
# 安装插件
# npm
npm i rollup-plugin-svg-sprites -D
# yarn
yarn add rollup-plugin-svg-sprites -D
2
3
4
5
注意
注:如果单独使用rollup来编译,则需要单独引入@rollup/plugin-commonjs,因为插件的核心是基于 svg-baker 和 svg-baker-runtime, 跟 svg-sprite-loader 一样的,这两个没有es的实现。
在 vite.config.js中:
import svgSprites from 'rollup-plugin-svg-sprites'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
svgSprites({
vueComponent: true,
exclude: ['node_modules/**']
})
]
})
2
3
4
5
6
7
8
9
10
11
12
在Vue单页面中:
<template>
<MyIcon />
</template>
<script setup>
import MyIcon from './my-icon.svg'
</script>
2
3
4
5
6
7
以上单组件的使用方式,这点跟 vite-sprite-loader的使用方式一致。
# 支持JSX
相信也有人尝试 react + vite 的组合,插件同样支持以 JSX 的形式返回。
在 vite.config.js中:
import svgSprites from 'rollup-plugin-svg-sprites'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
svgSprites({
jsx: true,
include: ['./icons']
})
]
})
2
3
4
5
6
7
8
9
10
11
12
在 App.jsx 中:
import MyIcon from './my-icon.svg'
function App() {
return (
<div className="App">
<MyIcon />
</div>
);
}
export default App;
2
3
4
5
6
7
8
9
10
11
注意
注:JSX的转换采用的是新的方式,需要对于 react 的版本是有一定要求的:
>=17.0.0
>=16.14.0
>=15.7.0
2
3
如果你在 Vue 中使用的 JSX,则应该采用 vueComponent 属性替代。
# 多组件通用的使用方式
先写一个 rollup.config.js:
import svgSprites from 'rollup-plugin-svg-sprites'
import requireContext from '@godxiaoji/rollup-plugin-require-context'
function kebabCase2PascalCase(name) {
name = name.replace(/-(\w)/g, (all, letter) => {
return letter.toUpperCase()
})
return name.substr(0, 1).toUpperCase() + name.substr(1)
}
export default {
input: './src/load-svg.js',
output: {
format: 'esm',
file: `lib/load-svg.js`,
banner: '/* eslint-disable */'
},
plugins: [
requireContext(),
svgSprites({
symbolId(filePath) {
const paths = filePath
.replace(/\\/g, '/')
.split('assets/icons/')[1]
.split('/')
const fileName = paths.pop().replace('.svg', '')
return (
'icon-' + kebabCase2PascalCase([fileName].concat(paths).join('-'))
)
}
})
],
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
注意
注意:由于这里用到了 require.context,这是 webpack 带的,rollup 需要借助插件。
写个引用所有icons的源码, ./src/load-svg.js
:
const req = require.context('./assets/icons', true, /\.svg$/)
先编译好,输出 lib/load-svg.js:
rollup -c
在Vue单页面中使用:
<template>
<svg>
<use xlink:href="#icon-My"></use>
</svg>
</template>
<script setup>
import './lib/load-svg'
</script>
2
3
4
5
6
7
8
9
之所以先编译好,是因为在 Vite 不太推荐使用 require.context,如果是一个个引入的,那不要先编译。
单个引用icons,./src/load-svg.js:
import './assets/icons/my.svg'
import './assets/icons/ok.svg'
2
在Vue单页面中:
<template>
<svg>
<use xlink:href="#icon-My"></use>
</svg>
</template>
<script setup>
import './src/load-svg'
</script>
2
3
4
5
6
7
8
9
这里就可以明显的看到使用的是 Sprite 这种方式。
# 优雅封装
我们将svg封装成一个独立组件 SvgIcon.vue:
<template>
<svg>
<use :xlink:href="iconName"></use>
</svg>
</template>
<script setup>
import { defineProps } from 'vue'
import './src/load-svg'
defineProps({
iconName: String
})
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
在其他组件中,就可以愉快的使用整批 icons:
<template>
<SvgIcon iconName="My" />
</template>
<script setup>
import SvgIcon from './SvgIcon.vue'
</script>
2
3
4
5
6
7
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13