1.0.10 • Published 5 years ago
vue-cli-plugin-icon-svg v1.0.10
vue-plugin-svg
安装包 npm i vue-cli-plugin-icon-svg
vue.config.js
- 代码
module.exports = {
pluginOptions: {
/**
* 路径名
* 默认 ./src 下的 svg 文件
*/
svgPath: '',
/**
* 生成的 symolId 名【即类名】
* 默认文件生成 icon-[name] 形式的类名
*/
symbolId: '',
}
}
- symbolId
<svg>
<use :xlink:href="`#${symbolId}`"/>
</svg>
引入 svg 组件
import { svgIcon } from 'vue-cli-plugin-icon-svg/lib'
Vue.use(svgIcon)
引入 svg 文件目录 svgPath 用户可以写个插件或直接引入在 main.js 中
/**
* require.context("./test", false, /.test.js$/);
* 这行代码就会去 test 文件夹(不包含子目录) 下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。
* 更直白的说就是 我们可以通过正则匹配引入相应的文件模块。
* require.context有三个参数:
* directory:说明需要检索的目录
* useSubdirectories:是否检索子目录
* regExp: 匹配文件的正则表达式
*/
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./icons', false, /\.svg$/)
requireAll(req)