参考 Vue项目中使用svg图标 这篇软文质量不错, 依葫芦画瓢,也跑通了
1.慢慢在理解其中包含的知识
2. 把自己理解换一种方式表达一下
我们想在vue页面使用svg图标,例如
<template> <div> <h1>Svg实践,在页面中使用</h1> <svg-icon icon-class="add"></svg-icon> <svg-icon icon-class="auto"></svg-icon> </div> </template> <script> export default { props: {}, components: {}, data() { return {}; }, computed: {}, created() {}, mounted() {}, watch: {}, methods: {} }; </script>
参考上面的文章
以上代码是svg的原生用法(正确性未验证)
1. src/icons 目录, 导入 svg 资源文件
2. npm install svg-sprite-loader --save-dev =>package.json
3. 配置webpack.base.conf.js(build文件夹中)
//设置Webpack 用 svg-sprite-loader 加载, src/icons 目录的内容,
换一种方式:
1). 在 rules 下增加
{ test: /.svg$/, loader: "svg-sprite-loader", include: [resolve("src/icons")], options: { symbolId: "icon-[name]" } },
//实际效果是,上面配置后webpack会加载src/icons下的index.js
2). webpack.base.conf.js 原生的 loader: 'url-loader',中去掉svg,就不再额外添加
指令: exclude:[resolve('src/icons')] ,
如下:
{ test: /.(png|jpe?g|gif)(?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } },
4. 自定义svg组件封装svg功能
基础核心知识
srciconsindex.js 中
import SvgIcon from '@/components/SvgIcon' 的加载行为
加载 srccomponentsSvgIconindex.vue
<svg :class="svgClass" aria-hidden="true" v-on="$listeners">
在Vue中使用svg图标即封装自定义svg-icon标签
如在 SvgDemo.vue 使用如下标签
<template> <div> <h1>Svg实践,在页面中使用</h1> <svg-icon icon-class="add"></svg-icon> <svg-icon icon-class="auto"></svg-icon> </div> </template>