1. 不光要引入css ,还要引入js

2. 在需要引入icon的地方添加

<svg className={styles.menuIcon} aria-hidden="true">
<use xlinkHref="#icon-woshiicon"/> // #icon-woshiicon 为 Font-class </svg>

3. css

.menu-icon {
width: 1em;
height: 1em;
fill: currentColor;
overflow: hidden;
// 以上是svg图标通用样式 font-size: 30px;
}

react 中使用阿里彩色图标的更多相关文章

  1. 微信小程序中使用阿里字体图标

    在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现. 为了美化微信小程序,可以适当的使用一些小图标,这样体验也更友好些,于是决定使用常用的字体图标. 下载图标 首先在阿里字体图标查找 ...

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

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

  3. 如何在微信小程序中使用阿里字体图标

    第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标. 如这里需要一个购物车的图标,流程为: 搜索“购物车”图标 --->  点击“添加入库”  ...

  4. 微信小程序中使用阿里ICON图标

    由于微信小程序不支持ttf字体,只支持base64的问题,需要把从图库下载下来的字体文件中的ttf文件转码为base64后使用如图 需将图中箭头所指的字体文件通过 https://transfonte ...

  5. react中使用阿里Viser图表

    参考demo的codesandbox:https://codesandbox.io/s/kxxxx3w5kv 使用步骤:   1. 安装依赖  viser-react和@antv/data-set 2 ...

  6. uni-app在线引入阿里字体图标库

    第一步 在app.vue中引入阿里字体图标库 第二步 在任意页面使用就可以了 <view class="item" v-for="(value,index) in ...

  7. 小程序中使用阿里图标库iconfont

    小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...

  8. vue中引入第三方字体图标库iconfont,及iconfont引入彩色图标

    iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...

  9. 前端学习笔记系列一:5 在项目中引入阿里图标icon

    进入到阿里的图标库网站,里面有上百万种icon,https://www.iconfont.cn,需要注册一个帐号,然后进入到这个页面,在这里点击右下角的带加号的图标,创建一个新的项目,名称与你要使用图 ...

随机推荐

  1. Jenkins-2.154 windows平台部署 FAQ

    部署过程中遇到的问题及解决办法如下 1.如何将 Jenkins 汉化? 1.进入系统管理 -> 插件管理 -> 选中“可选插件” 标签 -> 在过滤条件中输入“local”进行查找插 ...

  2. 在Winform开发中使用Grid++报表

    之前一直使用各种报表工具,如RDLC.DevExpress套件的XtraReport报表,在之前一些随笔也有介绍,最近接触锐浪的Grid++报表,做了一些测试例子和辅助类来处理报表内容,觉得还是很不错 ...

  3. 《你必须掌握的Entity Framework 6.x与Core 2.0》勘误

    第5章 5.1.1----致谢网友[宪煌] public virtual ICollection Post {get;set;} 修改为 public virtual ICollection<P ...

  4. IP防护等级简介

    IP(INGRESS PROTECTION)防护等级系统是由IEC(INTERNATIONAL ELECTROTECHNICAL COMMISSION)所起草,将电器依其防尘防湿气之特性加以分级 IP ...

  5. Login Verification CodeForces - 928A (实现)

    When registering in a social network, users are allowed to create their own convenient login to make ...

  6. 优先队列Priority Queue和堆Heap

    对COMP20003中的Priority queue部分进行总结.图片来自于COMP20003 queue队列,顾名思义特点先进先出 priority queue优先队列,出来的顺序按照优先级prio ...

  7. 详解WTL应用向导

    之前向 VS2019 中添加了 WTL 应用向导,今天来分析下该应用向导安装的相关文件,最终达到拷贝相关文件到 VS2019 的相应目录中即可直接使用 WTL 应用向导的目的. 在 VS2017 之前 ...

  8. VS2019 实用设置

    本文记录了 VS2019 预览版使用过程中的一些设置,这些设置也同样适用于 VS2017,我们可以根据个人的实际情况进行修改. 滚动条(Scroll Bar) 将滚动条设置为 map mode 后,则 ...

  9. (light oj 1306) Solutions to an Equation 扩展欧几里得算法

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1306 You have to find the number of solutions ...

  10. dpdk-18.11开发库编译安装

    简介 dpdk官网 安装 下载 点击下载地址,选择合适的版本下载.这里下载DPDK 18.11.0 (LTS)版本. 编译 将下载的dpdk-18.11.tar.xz上传服务器,解压,这里放在了/op ...