第一步
安装 svg-sprite-loader
yarn 安装
yarn add svg-sprite-loader -D
npm 安装
npm install svg-sprite-loader -D
第二步
在你使用的Vue中找到一个 vue.config.js 文件,如果没有就创建。
虽然官方文档说的是在webpack开头的文件中操作,但是我们在Vue中没有,所以我们就要将Vue-cli的内容翻译成svg-sprite-loader文档的内容
第三步
在 vue.config.js 中 写如下代码
const path = require("path");
module.exports = {
lintOnSave: false,
chainWebpack: config => {
const dir = path.resolve(__dirname, "src/assets/icons"); //讲解
config.module
.rule("svg-sprite") //添加规则
.test(/.svg$/) //匹配正则
.include.add(dir)
.end() //只包含dir中icons 这个目录
.use("svg-sprite-loader") //选择使用的loader
.loader("svg-sprite-loader") //确定使用这个loader
.options({ extract: false }) // 添加选项
.end()
.use("svgo-loader")
.loader("svgo-loader")
.tap(options => ({
...options,
plugins: [{ removeAttrs: { attrs: "fill" } }]
}))
.end();
config
.plugin("svg-sprite")
.use(require("svg-sprite-loader/plugin"), [{ plainSprite: true }]);
config.module.rule("svg").exclude.add(dir); // 其他 svg loader 排除 icons 目录
}
};
讲解:其中的 src/assets/icons 这个路径就是你存放svg的目录
第四步
在 shims-vue.d.ts 文件中添加以下代码
declare module "*.svg" {
const content: string;
export default content;
}
再用import引入
import x from "@/assets/icons/label.svg"
import x from "@/assets/icons/money.svg"
这时候你会发现body里面有个svg标签 (console使用一下引入的图片,不然显示不了)
我们在body里面创建了一个svg标签,里面有很多个symbol每个symbol又都有一个id,这些id对应的就是我们引入的svg。
整理:这个loader 先把svg变成symbol在再外面套一个svg,然后把这个svg放到body里面。
接下在就可以在另一个svg里面使用use选择里面的图片了
<svg>
<use :xlink:href="#label" />
</svg>
这时候你就会发现你的svg图片出现在了页面中
到此就成功再Vue中引入了svg。
但是
这样很麻烦不是吗,一个图片就要引入一次,所以我们可以封装一下
只需要这两行代码
const importAll = (requireContext: __WebpackModuleApi.RequireContext) =>
requireContext.keys().forEach(requireContext);
try {
importAll(require.context("../assets/icons", true, /.svg$/));//同样的 ../assets/icons 这是图片目录
} catch (error) {
console.log(error);
}//try catch 是怕在单元测试中可能会遇到的问题而准备的
这样能把你文件里的svg图片全部都引入,你只需要使用use使用就可以了
同时你也可以把这些全部封装成一个Icon组件,使用时只需要给个name就能直接显示图片了 我直接上图片
这样你就能直接给个name就能加载出图片了