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. 蓝牙secure simple pair 概述

    Secure Simple Pairing,简称SSP,其流程主要分为六个部分: • IO capabilities exchange • Public key exchange • Authenti ...

  2. JS 设计模式七 -- 外观模式

    概念 为子系统中的一组接口提供一个一致的界面,定义一个高层接口,这个接口使子系统更加容易使用. 外观模式在JS中,可以认为是一组函数的集合. 实现 // 三个处理函数 function start() ...

  3. 关于配置ssh免密码登录后，仍提示输入密码

    一.在A端创建密钥对: [root@A ~] -P '' 二.如果B机器没有.ssh和authorized_keys文件则创建这个文件夹和文件先,创建后要chown改成当前用户的所属者,其次也要改: ...

  4. java中的“空格”用trim()无法去除？原来是这样！

    原因: 从txt文件中读取一些数据导入mysql数据库,导入数据库之后发现有一个字段的前面有两个“空格”,后来在代码里我尝试用trim().replace()等方法去除,发现怎么也去不掉,于是我将字符 ...

  5. dva

    import React, { PureComponent } from "react"; import { Chart, Geom, Axis, Tooltip, Coord, ...

  6. MySQL安装后无法用root用户访问的问题

    今天在换了Ubuntu后装个本地的mysql,安装过程没什么好说的:sudo apt-get install mysql-server 安装好了之后我做了以下一系列常规动作: 1.$sudo mysq ...

  7. react native输入框定位在底部(虚拟键盘弹起)

    1.通过Keyboard获取键盘高度,改变定位的bottom 缺点:虚拟键盘完全弹起时,才会获取到键盘高度,定位稍有延迟,而且键盘收起时,定位会出现悬空状态,然后再回到底部 import React, ...

  8. asp.net core开源项目

    Orchard框架:https://www.xcode.me/code/asp-net-core-cms-orchard https://orchardproject.net/ https://git ...

  9. 高斯消元与行列式求值 part1

    两道模板题,思路与算法却是相当经典. 先说最开始做的行列式求值,题目大致为给一个10*10的行列式,求其值 具体思路(一开始看到题我的思路): 1.暴算,把每种可能组合试一遍,求逆序数,做相应加减运算 ...

  10. GIt帮助文档之忽略某些文件——忽略python虚拟环境文件夹（转）

    前言:为避免多个Python项目下安装库之间的冲突,或为轻松打包某个项目,建议在每个项目文件夹下安装Python虚拟环境,并在虚拟环境内进行操作,之后你安装的任何库和执行的任何程序都是在这个环境下运行 ...