阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍

创建SvgIcon组件

<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>
</template> <script>
export default {
name: 'svg-icon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
}
}
}
</script> <style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>

创建icons文件夹

src跟目录下创建icons文件夹,里面创建svg文件夹和index.js文件

 
image.png

svg文件夹中用来存放各种扩展的.svg图标。

index.js

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件 // register globally
Vue.component('svg-icon', SvgIcon) const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
// function requireAll(files) {
// return files.keys().map((item) => {
// return files(item)
// })
// }
// function myParseInt(intString){
// return parseInt(intString, 10);
// }
// ['1', '2'].map(myParseInt);
// 只传入一个函数,表示数组中每个值作为参数,传入

main.js中引入

import './icons'

下载插件

cnpm i svg-sprite-loader --save

配置

在build/webpack.base.conf.js文件中,加入

      {
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [path.resolve('src/icons')],
options: {
symbolId: 'icon-[name]'
}
}

并在以下设置中添加exclude: [resolve('src/icons')],,如下所示

      {
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [path.resolve('src/icons')],
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},

使用

ok,大功告成,这样就可以在.vue页面中直接使用.svg文件了。使用.svg文件的名称,通过icon-class属性来引用。

<svg-icon icon-class="user" />

作者:知足常乐晨
链接:https://www.jianshu.com/p/7e65608ddc0a
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

vue中引入.svg图标,使用iconfont图标库的更多相关文章

  1. 在vue中使用svg sprite

    概述 这几天研究了一下在vue中使用svg sprite,有些心得,记录下来,供以后开发时参考,相信对其它人也有用. 在vue中导入svg 在vue中导入svg的方法有很多种,比如在img标签的src ...

  2. vue中引入babel步骤

    vue中引入babel步骤 vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5. 1.安装babel-polyfill插件 npm ...

  3. vue中引入json数据,不用本地请求

    1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小 ...

  4. vue中引入mintui、vux重构简单的APP项目

    最近在学习vue时也了解到一些常用的UI组件,有用于PC的和用于移动端的.用于PC的有:Element(饿了么).iView等:用于移动端APP的有Vux.Mint UI(饿了么).Vant(有赞团队 ...

  5. vue中引入mui报Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them的错误

    在vue中引入mui的js文件的时候,报如下的错误: 那是因为我们在用webpack打包项目时默认的是严格模式,我们把严格模式去掉就ok了 第一步:npm install babel-plugin-t ...

  6. vue中使用svg字体图标

    1.在src/ 下面新建目录icons,里面新建文件夹svg,和文件index.js .svg用于存放从iconfont下载下来的svg格式的图标,index.js用于引入使用到svg文件和对应的组件 ...

  7. vue中引入字体图标报错,找不到字体文件

    在用vue + webpack进行开发的时候,在引用字体图标遇到字体无法加载的问题: 报以下错误 搞了好久没搞定,最后才找到解决方法(还是没有找到原因) 修改字体图标的css中引入字体文件的路径 以前 ...

  8. 如何在vue中使用svg

    1.安装依赖 npm install svg-sprite-loader --save-dev 2.在config文件中配置    const path = require('path'); func ...

  9. vue中引入swiper(vue中的滑块组件vue-awesome-swiper)

    第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import VueAwesomeSwiper from 'vue-awesome ...

随机推荐

  1. mysql字段值如何区分大小写

    今天做sql查询,发现字段值没区分大小写 mysql> select guid,type,parent_guid from api_assets where guid='3rfI2PsSrCz9 ...

  2. hive 字符串截取

    语法 :substr(字段,starindex,len)  下标从 1 开始 测试 ,) from siebel_cx_order limit ; -- -- -- -- -- -- -- -- -- ...

  3. java内存模型,内存区域

    Java虚拟机内存区域总结:Java虚拟机相当于一个抽象的计算机操作系统, 其管理的内从区域大体上可以分为栈和堆,就像c或c++中对内存的分类一样, 但这样的分类对于Java虚拟机来说太过粗浅, 实际 ...

  4. [转帖]dfs和bfs

    dfs和bfs https://www.cnblogs.com/wzl19981116/p/9397203.html 1.dfs(深度优先搜索)是两个搜索中先理解并使用的,其实就是暴力把所有的路径都搜 ...

  5. php mysql的储存过程 实现批量更新

    UPDATE newhouse_clicks SET clicks = CASE id WHEN 1 THEN 1000 WHEN 2 THEN 2000 WHEN 3 THEN 3000 END W ...

  6. php数组到json的转变

    今天做项目遇到个问题,一个接口,输出二维数组,前端说他要的数据格式是数组,而不是对象,就像上个数据一样,我当时就懵逼了,,,什么对象?我明明输出的是数组啊...然后我看了看我返回的json串,emmm ...

  7. 一句话比较两种算法的优越性[蓝桥杯,LeetCode]

    动态规划 166 数学 155 字符串 146 树 120 哈希表 119 深度优先搜索 109 二分查找 79 贪心算法 64 双指针 59 广度优先搜索 54 栈 53 回溯算法 49 设计 41 ...

  8. ELK学习笔记之Logstash不停机自动重载配置文件

    0x00 自动重新加载配置 为了可以自动检测配置文件的变动和自动重新加载配置文件,需要在启动的时候使用以下命令: ./bin/lagstash -f configfile.conf --config. ...

  9. java之hiberante之集合映射之list映射

    这篇讲解 集合映射之List映射 1.通常对于集合,在hibernate中的处理都是使用set来完成.但是hibernate也提供了对于其他几种集合的映射. 在这里实现List的映射,List是有序的 ...

  10. K-匿名算法研究

    12月的最后几天,研究了下k匿名算法,在这里总结下. 提出背景 Internet 技术.大容量存储技术的迅猛发 展以及数据共享范围的逐步扩大,数据的自动采集 和发布越来越频繁,信息共享较以前来得更为容 ...