标签：default 需要 build pac 文件中 创建 代码 ring ack
svg矢量图有时候在项目中用起来当然要比图片用起来好。之前没有用过svg，这次花了一点时间在项目中支持了svg的使用，个人感觉用起来还是没有直接用font class的爽，然后又改成font class的使用，如下我说一下我是如何配置svg和font class的（这两者都是iconfont 的不同使用方法）：
1. 在package.json中引入svg-sprite-loader
2. 在vue.config.js中配置webpack,代码如下：
chainWebpack: config => { const svgRule = config.module.rule(‘svg‘) svgRule.uses.clear() svgRule .use(‘svg-sprite-loader‘) .loader(‘svg-sprite-loader‘) .options({ symbolId: ‘icon-[name]‘ }) }
3. 在src下边创建一个icons文件夹（里面放需要用到的svg图标）
4.再写一个全局通用的组件SvgIcon.vue
/* svg-icon的用法： 1. http://www.iconfont.cn网站上找到自己需要的图标 2. 设置自己需要的颜色（也可以直接下载下来再设置颜色） 3. 下载svg格式放到icons文件夹下边 4. 在别的文件中引用(import ‘ICONS/***.svg‘) 5. 使用<svg-icon :icon-class="‘***‘" width="18" height="18"></svg-icon> */ <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"/> </svg> </template> <script> export default { name: ‘SvgIcon‘, props: { iconClass: { type: String, required: true }, className: { type: String, default: ‘‘ } }, computed: { iconName() { return `#icon-${this.iconClass}` }, svgClass() { if (this.className) { return ‘svg-icon ‘ + this.className } else { return ‘svg-icon‘ } } } } </script> <style lang="scss" scoped> .svg-icon { vertical-align: middle; fill: currentColor; overflow: hidden; } </style>
5. 因为上边的这个组件是全局通用的，所以要在项目加载的第一时间把它注册到全局Vue中去，在入口文件main.js中设置
import SvgIcon from ‘COMPONENTS/SvgIcon‘
。。。
Vue.component(‘svg-icon‘, SvgIcon)
6. 经上边的设置后，npm install ,重新build项目之后就可以了（像上边看到的ICONS 或 COMPONENTS，都是在配置文件中添加的路径别名）
1. 在http://www.iconfont.cn创建一个的项目，然后把自己设计的svg图标上传到自己的项目下边（也可以把别的项目里面的图标加到购物车，再添加到自己的项目里）
2. 拷贝项目下边生成的fontclass代码（.css代码）
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
3. 挑选相应图标并获取其类名，应用于网页：
<i class="iconfont icon-xxx"></i>
标签：default 需要 build pac 文件中 创建 代码 ring ack
原文地址：https://www.cnblogs.com/yyh1/p/9826183.html
