位置: IT常识 - 正文

vue中使用iconfont(vue中使用原生js)

编辑:rootadmin
vue中使用iconfont 一、目录结构

推荐整理分享vue中使用iconfont(vue中使用原生js),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue中使用原生js,vue中使用nodejs,vue中使用nodejs,vue中使用require报错,vue中使用swiper插件实例,vue中使用原生js,vue中使用swiper插件实例,vue中使用原生js,内容如对您有帮助,希望把文章链接给更多的朋友!

二、登陆iconfont,添加图标到购物车,并加入到项目中

1. 设置图标下载格式

2. 项目设置:勾选字体格式SVG

3. 下载到本地,解压

补充

其实在你下载的图标文件里demo有个html文件

在浏览器打开后会看到你所有的图标,并且在页面最底下有使用方法具体内容请自行查看

vue中使用iconfont(vue中使用原生js)

4. 把demo_index.html、demo.css、inconfont.js添加到 src/assets/icon文件中

5. 在src/components/SvgIcon中添加组件代码

<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 scoped>.svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}</style>

 6. 在目录src/icons/index.js中添加下面的代码  全局注册icon组件,并引入非下载的iconfont中的svg图标

这个有个起源是我接手了一个项目,然后用的iconfont图标,因为这个别人下载的iconfont图标,所以我想在往里加图标没办法添加。这时我就单个下载iconfont  svg图标  并加入到src/icons/svg目录下

import Vue from 'vue';import SvgIcon from '@/components/SvgIcon';import '@/assets/icon/iconfont';Vue.component('svg-icon', SvgIcon);const requireAll = reqireContext => reqireContext.keys().map(reqireContext);const req = require.context('./svg', false, /\.svg$/);requireAll(req);

 7. 在main.js中引入 

require('./icons');

 遇到的问题: 当单个下载iconfont图标时,发现选中标签栏时图标没有高亮

1).有问题的效果

 2).应该达到的效果

原因:svg图标 带有 fill 属性,默认是带有颜色的,想要修改先把原fill颜色去掉,如下:

3)去色前后对比

 去色后:

8. 使用

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

效果: 

本文链接地址:https://www.jiuchutong.com/zhishi/298568.html 转载请保留说明!

上一篇:Vue | Vue.js 高级语法系列(vue高级函数)

下一篇:nodejs安装和环境配置-Windows(nodejs安装及环境配置win10)

  • 如何在网上查询个人房产
  • 关税的完税价格是什么意思
  • 转让旧固定资产可以开专票吗
  • 电信电话费计入成本吗
  • 残疾人士有哪些
  • 企业购买的雇主责任险
  • 航运(集团)招聘
  • 房地产开发企业资质等级有几个
  • 委托销售怎么做分录
  • 股票回购后多久注销
  • 甲供材的范围
  • 有一个月忘了报税怎么处理
  • 一般纳税人有按季申报的吗
  • 劳务派遣差额征税税率是多少
  • 发票金额与支票数量不符
  • 小规模开税票怎么开
  • 金税三期得死多少企业
  • 进项税额能抵扣的几种情形
  • 隔月的发票能作废吗
  • 企业收到利息收入开发票吗
  • 预付账款为负数能转为应付账款吗
  • 代销返利业务会计处理
  • uniapp关闭当前页面
  • 健康助手在哪里找到
  • 缴税怎么入账
  • ue4 像素流并发
  • win10商店如何改地区
  • 一般纳税人收到小规模专票怎么抵扣
  • object转map工具类
  • 十分钟带你了解阿氏圆
  • 某建筑公司因施工期紧迫,事先未能与有关
  • php处理xml
  • 高新技术企业取消资格的程序
  • 阿拉斯给加拉普
  • 计提工会经费会计账务处理
  • 你还没等于几
  • traceroute命令详解
  • 视图机制
  • 印花税和工会经费用不用计提
  • 安全文明措施费费率一般为多少
  • 完整财务报表包括哪几类
  • 包装物为什么是无菌的
  • php中isset函数作用
  • mysql自动生成id
  • dedecmsv6插件不能用
  • 融资租赁手续费一次性还是摊销
  • 不符合无形资产摊销条件
  • 递延收益与预收收益区别
  • 零申报不报税有什么后果
  • sqlmap暴力破解
  • 合伙人资本属于个人资本吗?
  • 公司垫付生育津贴后,社保局未报销给公司
  • 闲置土地属于哪个部门
  • 取得股票期权的个人所得税问题
  • 主营业务收入可以进一般户吗
  • 金税盘未响应什么意思
  • 高新企业研发收入占总收入比例怎么算
  • 确定施工程序怎么写
  • 设备折旧怎么记账
  • 如何查询一个企业的纳税情况
  • 原始凭证填制要点在原始凭证上书写阿拉伯数字正确的有
  • 民营企业固定资产管理规定
  • win10虚拟桌面版
  • win10怎么设置定时关机和开机
  • 雨林木风Windows10
  • linux系统查看磁盘io
  • winxp任务栏消失
  • windows mobile10
  • redhat linux yum
  • linux ssh默认端口
  • linux文件系统的根目录的i节点号为
  • 深入理解中国式现代化
  • 一键删除通讯录联系人
  • unity 3d ui
  • 浅谈编码,解码的意义
  • 安卓cts认证
  • 软件使用权转让税率
  • 税务局签合同
  • 总公司和子公司是什么关系
  • 北京ca证书下载安装流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设