1 添加依赖

npm install svg-sprite-loader file-loader -D

2 在components目录下新增一个IconSvg.vue文件

<template>
<svg class="svg-icon" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" />
</svg>
</template> <script>
export default {
name: "icon-svg",
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>
.svg-icon {
/*
这里可以自定义宽高
width: 1em;
height: 1em;
*/
width: 2em;
height: 2em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>

3、添加icon-svg组件

  在main.js中 新增全局组件

   //引入svg组件
import IconSvg from './components/IconSvg' // //全局注册icon-svg
Vue.component('icon-svg', IconSvg)

4、配置vue.config.js

const path = require('path')
module.exports = {
/**这里之后,还有第一行的path是跟svg有关系的配置**/
chainWebpack: config => {
const svgRule = config.module.rule('svg')
// 清除已有的所有 loader。
// 如果你不这样做,接下来的 loader 会附加在该规则现有的 loader 之后。
svgRule.uses.clear()
svgRule
.test(/\.svg$/)
// 配置icons的目录 我这里默认放在了 /src/assets/icons 目录下 如要修改 记得更换你的目录
.include.add(path.resolve(__dirname, './src/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
const fileRule = config.module.rule('file')
fileRule.uses.clear()
fileRule
.test(/\.svg$/)
// 配置icons的目录 我这里默认放在了 /src/assets/icons 目录下 如要修改 记得更换你的目录
.exclude.add(path.resolve(__dirname, './src/assets/icons'))
.end()
.use('file-loader')
.loader('file-loader')
}
}

5、使用方式

  导入.svg图标

  import "@/assets/icons/aa.svg"

  使用图标

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



vue项目中配置svg图标 cli3路径的更多相关文章

  1. vue项目中配置favicon图标

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

  2. Vue项目中使用svg图标

    svg的图片有着颜色自定义大小自定义的优势.在阿里图标库可以下载svg图片. 那么在vue框架中我们该怎么使用svg图片呢 这个时候就用到了 webpack 插件 svg-sprite-loader ...

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

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

  4. vue项目中使用iconMoon图标

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

  5. 在vue项目中配置webpack

    首先我们来看一下使用Vue-cli2与Vue-cli2之后的版本(这里以Vue-cli4版本为例)创建项目目录结构的不同: Vue-cli2(左图)与Vue-cli4(右图)创建项目的目录 从上图可以 ...

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

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

  7. vue项目中配置scss

    之前创建 vue 项目的时候没有选择 scss 预编译,现在项目中要使用,不知道如何配置,网上搜了下全都是: npm  install sass-loader --save-devnpm instal ...

  8. vue项目打包后资源相对引用路径的和背景图片路径问题

    vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...

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

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

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

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

随机推荐

  1. 基于北斗gps设计的NTP网络时间服务器

    基于北斗gps设计的NTP网络时间服务器 基于北斗gps设计的NTP网络时间服务器 京准电子科技官微--ahjzsz 随着5G等新型基础设施持续建设和发展,在未来万物互联的庞大信息网络中,跨路由节点之 ...

  2. [ZZH]第一篇博客

    time: 2022/3/29  20:24 my first blog

  3. #pragma 小节

    (1)#pragma startup function-name <priority> (2)#pragma exit function-name <priority>   含 ...

  4. 使用docker 创建6节点redis 集群 RedisCluster redis集群

    1.RedisCluster 特点(3主节点redis 集群  及6节点集群) 1.无中心节点,客户端与redis 节点直连,不需要中间代理,(有选举机制 master个数需要奇数个) 2.数据可以被 ...

  5. WPF-UI框架MahApps.Metro使用教程

    参考教程:https://www.shuzhiduo.com/A/xl561ZaoJr/ 一,MahApps.Metro安装 1,项目中引用"MahApps.Metro.dll"[ ...

  6. 专业视频图片水印清除工具丨HitPaw Watermark Remover 2.1.3

    软件下载 MAC/Windows HitPaw Watermark Remover 软件介绍 HitPaw Watermark Remover 是一款能够轻松去除图片视频水印的软件.对于有水印的图片视 ...

  7. Jenkins安装和自动化部署

    1.Jenkins安装机器安装要求可以参考官网 https://www.jenkins.io 2.下载jenkins的war包上传到linux上部署 3.安装jdk.git.maven 3.1.安装j ...

  8. css3中-webkit是什么意思

    在CSS样式中很多样式名前缀都带有'-webkit-',但在CSS提供的API中查询不到这些样式名. 原因:CSS3中新增了一些属性,针对不同的浏览器,规定其内核名称让它们可以对这些新增属性进行解析. ...

  9. vi中将小写转换成大写字母

    VI阅读模式下连续按gUW可以将小写转换成大写

  10. debian11 bspwm+polybar问题记录(siji字体无法正常显示)

    一.siji字体无法显示. 很懒很菜,就想用开箱即用的原始配置依然遇到了问题...plybar中的bitmap字体siji无法正常显示.即便按照github的siji官方脚本安装了siji字体还是不行 ...