svg的图片有着颜色自定义大小自定义的优势。在阿里图标库可以下载svg图片。
那么在vue框架中我们该怎么使用svg图片呢
这个时候就用到了 webpack 插件 svg-sprite-loader 首先呢自然就是安装了 npm i svg-sprite-loader --save 创建svg文件目录/src/icons/svg 里面呢放置所有svg文件 还有/src/icons/index.js //index.js
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'
/* require.context("./test", false, /.test.js$/);
这行代码就会去 test 文件夹(不包含子目录) 下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。
更直白的说就是 我们可以通过正则匹配引入相应的文件模块。
require.context有三个参数:
directory:说明需要检索的目录
useSubdirectories:是否检索子目录
regExp: 匹配文件的正则表达式 */
// 全局注册
Vue.component('svg-icon', SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req) 在 webpack.base.conf.js 文件中添加 rules 配置 //webpack.base.conf.js
{
test: /\.svg$/,
loader: "svg-sprite-loader",
include: [path.resolve(__dirname, '../src/icons/svg')],//包括字体图标文件
// options: {
//symbolId: 'icon-[name]' //这个没有生效,生效的是默认的name
// }
} 然后修改 url-loader 配置 //webpack.base.conf.js
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: "url-loader",
exclude: [
path.resolve(__dirname, '../src/icons/svg'), //排除字体图标文件
],
options: {
limit: 10000,
name: utils.assetsPath("img/[name].[hash:7].[ext]")
}
} 创建 vue 组件 svg-icon <!-- @/components/SvgIcon -->
<template>
<svg :class="svgClass" aria-hidden="true" @click="$emit('click')">
<use :xlink:href="iconName"></use>
</svg>
</template> <script>
/**
* svg 图标组件
* iconClass="图标名称"
* className="风格名称"
*/
export default {
name: 'svg-icon',
props: {
iconClass: { type: String, required: true },
className: { type: String }
},
computed: {
iconName () {
return `#${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> 在main.js中引入 import './icons/index.js' 这样就能在vue中使用了 具体格式如下 <svg-icon icon-class="svg文件名"/>

Vue项目中使用svg图标的更多相关文章

  1. 在 React、Vue项目中使用 SVG

    在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再 ...

  2. vue项目中使用iconMoon图标

    前两篇文章写了一下如何在vue项目中使用vue-awesome和阿里的iconfont,这里介绍一下如何使用iconMoon图标 iconMoon和前两者相比可以生成自己的矢量图,这点是我喜欢的.至于 ...

  3. 在vue项目中引入阿里图标库小记

    使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...

  4. vue项目中配置favicon图标

    如上图所示,页面顶部的小图标会让页面显得高大上,一般把这种图标叫做favicon图标.利用vue-cli脚手架搭建的项目,如果不手动配置,页面中是不会显示favicon图标. 不配置是这样子的: fa ...

  5. vue中,svg图标添加click事件,部分浏览器不生效

    vue项目中,使用svg图标,但是发现,为svg图标绑定click事件时,部分浏览器会出现,点击没有反应的情况,代码如下: <icon name="icon_add" @cl ...

  6. vue 项目中使用阿里巴巴矢量图标库iconfont

    原文:https://www.jianshu.com/p/38262f18eee2 1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图 ...

  7. vue项目中使用阿里iconfont图标

    在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...

  8. vue项目中遇到的一些问题

    或访问:https://github.com/littleHiuman/experiences-about-vue  欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...

  9. 在vue项目引入阿里巴巴矢量图标

    1.在阿里矢量图标库将想要的图标加入购物车,然后在购物车中将图标添加到项目: 2.到我的项目中,将图标下载到本地 3.在vue项目的assets文件夹下新建一个iconfont文件夹(名字自定义),将 ...

随机推荐

  1. 打造属于自己的安卓Metro界面

    前言: 各位小伙伴,又到了每周更新文章了时候了,本来是周日能发出来呢,这不是赶上清明节吗,女王大人发话了,清明节前两天半陪她玩,只留给我周一下午半天时间写博客,哪里有女王哪里就有压迫呀有木有!好了闲话 ...

  2. get方式编码问题解决方案 转载

    我们的内容使用GET方式发送,就会在URL后面带上内容,在游览器发来的请求经过了游览器的URI编码,发送到服务器这边,如果是struts2会经过拦截器进行URI解码,并且使用"iso8859 ...

  3. mybatis logback打印sql

    <?xml version="1.0" encoding="UTF-8" ?><configuration> <contextNa ...

  4. 轻量级数据库sqlite的接口说明

    原文地址:http://www.cnblogs.com/kfqcome/archive/2011/06/27/2136999.html 一.使用流程 要使用sqlite,需要从sqlite官网下载到三 ...

  5. 那天有个小孩教我WCF[一][1/3]

    那天有个小孩教我WCF[一][1/3] 既然是小孩系列,当然要有一点基础才能快速掌握,归纳,总结的一个系列,哈哈 前言: 第一篇嘛,不细讲,步步教你创建一个简单SOA案例,对WCF有个基本的认识,我不 ...

  6. AJAX应用【股票案例】

    股票案例 我们要做的是股票的案例,它能够无刷新地更新股票的数据.当鼠标移动到具体的股票中,它会显示具体的信息. 我们首先来看一下要做出来的效果: 服务器端分析 首先,从效果图我们可以看见很多股票基本信 ...

  7. Tornado框架实现异步爬虫

    from urllib.parse import urljoin from bs4 import BeautifulSoup from tornado import gen, httpclient, ...

  8. Gym 100463A Crossings (树状数组 逆序对)

    Crossings Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100463 Description ...

  9. 【代码审计】iZhanCMS_v2.1 前台存储型XSS漏洞分析

      0x00 环境准备 iZhanCMS官网:http://www.izhancms.com 网站源码版本:爱站CMS(zend6.0) V2.1 程序源码下载:http://www.izhancms ...

  10. php程序开销比较

    内存最快 文件次之 数据库最慢