vue项目中配置svg图标 cli3路径
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路径的更多相关文章
- vue项目中配置favicon图标
如上图所示,页面顶部的小图标会让页面显得高大上,一般把这种图标叫做favicon图标.利用vue-cli脚手架搭建的项目,如果不手动配置,页面中是不会显示favicon图标. 不配置是这样子的: fa ...
- Vue项目中使用svg图标
svg的图片有着颜色自定义大小自定义的优势.在阿里图标库可以下载svg图片. 那么在vue框架中我们该怎么使用svg图片呢 这个时候就用到了 webpack 插件 svg-sprite-loader ...
- 在 React、Vue项目中使用 SVG
在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再 ...
- vue项目中使用iconMoon图标
前两篇文章写了一下如何在vue项目中使用vue-awesome和阿里的iconfont,这里介绍一下如何使用iconMoon图标 iconMoon和前两者相比可以生成自己的矢量图,这点是我喜欢的.至于 ...
- 在vue项目中配置webpack
首先我们来看一下使用Vue-cli2与Vue-cli2之后的版本(这里以Vue-cli4版本为例)创建项目目录结构的不同: Vue-cli2(左图)与Vue-cli4(右图)创建项目的目录 从上图可以 ...
- 在vue项目中引入阿里图标库小记
使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...
- vue项目中配置scss
之前创建 vue 项目的时候没有选择 scss 预编译,现在项目中要使用,不知道如何配置,网上搜了下全都是: npm install sass-loader --save-devnpm instal ...
- vue项目打包后资源相对引用路径的和背景图片路径问题
vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...
- vue项目中使用阿里iconfont图标
在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...
- vue中,svg图标添加click事件,部分浏览器不生效
vue项目中,使用svg图标,但是发现,为svg图标绑定click事件时,部分浏览器会出现,点击没有反应的情况,代码如下: <icon name="icon_add" @cl ...
随机推荐
- 基于北斗gps设计的NTP网络时间服务器
基于北斗gps设计的NTP网络时间服务器 基于北斗gps设计的NTP网络时间服务器 京准电子科技官微--ahjzsz 随着5G等新型基础设施持续建设和发展,在未来万物互联的庞大信息网络中,跨路由节点之 ...
- [ZZH]第一篇博客
time: 2022/3/29 20:24 my first blog
- #pragma 小节
(1)#pragma startup function-name <priority> (2)#pragma exit function-name <priority> 含 ...
- 使用docker 创建6节点redis 集群 RedisCluster redis集群
1.RedisCluster 特点(3主节点redis 集群 及6节点集群) 1.无中心节点,客户端与redis 节点直连,不需要中间代理,(有选举机制 master个数需要奇数个) 2.数据可以被 ...
- WPF-UI框架MahApps.Metro使用教程
参考教程:https://www.shuzhiduo.com/A/xl561ZaoJr/ 一,MahApps.Metro安装 1,项目中引用"MahApps.Metro.dll"[ ...
- 专业视频图片水印清除工具丨HitPaw Watermark Remover 2.1.3
软件下载 MAC/Windows HitPaw Watermark Remover 软件介绍 HitPaw Watermark Remover 是一款能够轻松去除图片视频水印的软件.对于有水印的图片视 ...
- Jenkins安装和自动化部署
1.Jenkins安装机器安装要求可以参考官网 https://www.jenkins.io 2.下载jenkins的war包上传到linux上部署 3.安装jdk.git.maven 3.1.安装j ...
- css3中-webkit是什么意思
在CSS样式中很多样式名前缀都带有'-webkit-',但在CSS提供的API中查询不到这些样式名. 原因:CSS3中新增了一些属性,针对不同的浏览器,规定其内核名称让它们可以对这些新增属性进行解析. ...
- vi中将小写转换成大写字母
VI阅读模式下连续按gUW可以将小写转换成大写
- debian11 bspwm+polybar问题记录(siji字体无法正常显示)
一.siji字体无法显示. 很懒很菜,就想用开箱即用的原始配置依然遇到了问题...plybar中的bitmap字体siji无法正常显示.即便按照github的siji官方脚本安装了siji字体还是不行 ...