位置: 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)

  • 城建税的征税范围不包括农村对不对
  • 借贷记账法的基本结构
  • 口罩属于什么经营类别
  • 百旺税控盘自己用不了
  • 员工回家探亲的文案
  • 销售部门快递费用怎么算
  • 现金折扣的销售额
  • 怎么算应纳税收多少
  • 价内税是指
  • 公司实行注册资本认缴制
  • 期末应交企业所得税怎么算
  • 银行电子回单号码什么意思
  • 购买预付油卡的账务处理
  • 水产养殖公司的经营范围_问答
  • 企业所得税费用税率
  • 烟酒销售公司要交哪些税
  • 支付职工补贴计入什么科目
  • 贷款本金余额具体是什么意思
  • 企业所得税汇算清缴扣除比例
  • 剩余材料出售
  • 维修是几个点的税率
  • PHP:mb_ereg_search_getpos()的用法_mbstring函数
  • 重装系统前需要注意什么
  • win11如何
  • mstore.exe - mstore是什么进程 有什么用
  • wwwxxx域名选择(www.xxx.com或者.cn)
  • php类和对象
  • 工业企业采购部门职责
  • 建筑设备出租并配备人员
  • php转换字符编码
  • 外贸企业申报出口退税的期限
  • 工程质保金如何做账
  • uniapp编译原理
  • js实现dialog
  • springmvc执行流程简单
  • 银行结算方式有哪几种方式?其具体内容是什么?
  • php shell_exec()
  • php对接微信支付教程
  • 关于存货跌价准备
  • 建筑企业异地预缴增值税销售额含税吗
  • 物流企业财务流程
  • 织梦怎么改网站主页
  • 工程施工和工程结算的账务处理
  • 内账中采购另付的税点算成本还是费用
  • 实收资本属于限定性净资产吗
  • 企业代扣代缴个税
  • 营业利润率高好还是低好
  • 主播工资不发应该到哪里投诉
  • 出现销项负数
  • 上一年的奖金在哪查
  • 无形资产计提减值准备计算
  • 汇算清缴可以调整主营业务成本吗
  • 其他应收款如何计提坏账准备
  • 记账凭证原始凭证回单的粘贴顺序
  • 企业低值易耗品的摊销方法有( )
  • 大学里学分不满不让毕业是真的吗
  • 华尔街日报体
  • 纸嫁衣6第四章攻略全文图解
  • vmware下ubuntu(linux)与主机文件共享设置的方法
  • linux 挂载img
  • freebsd怎么安装
  • ubuntu下source、sh、bash、./执行脚本的区别详细介绍
  • ghost硬盘对拷反了
  • quickdcf.exe - quickdcf是什么进程 作用是什么
  • win10系统预览版
  • scikit-learn svr
  • 遮罩层中对象的作用是
  • vuex的作用和使用场景
  • list在python中的作用
  • vue父子组件传值props
  • jquery二级导航栏
  • 安卓hid通信
  • ug编程代码意思
  • jquery鼠标位置
  • actionbar如何添加按钮
  • python搭建平台
  • 如何查询车辆购置税是否缴纳
  • 自然人办税服务平台怎么登录不进?
  • 停车票日期在哪里
  • 车船税单独交行吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设