标签：src 表达 set rom uil targe vue 使用 内容 图标
参考 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功能
基础核心知识
src\icons\index.js 中
import SvgIcon from ‘@/components/SvgIcon‘ 的加载行为
加载 src\components\SvgIcon\index.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>
标签：src 表达 set rom uil targe vue 使用 内容 图标
原文地址：https://www.cnblogs.com/zhuji/p/13135015.html
