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. Windows7安装 docker-compose的过程

    Docker在Windows7系统上安装成功后[详情见Windows7下docker的安装以及遇到的问题],要用到docker-compose相关命令,而docker-compose相关命令在dock ...

  2. 一个ELK日志检索实施案例

    figure:first-child { margin-top: -20px; } #write ol, #write ul { position: relative; } img { max-wid ...

  3. 浏览器仿EXCEL表格插件 版本更新 - 智表ZCELL产品V1.3.2更新

    智表(zcell)是一款浏览器仿excel表格jquery插件.智表可以为你提供excel般的智能体验,支持双击编辑.设置公式.设置显示小数精度.下拉框.自定义单元格.复制粘贴.不连续选定.合并单元格 ...

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

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

  5. remote: Permission to user_name/Code.git denied to other_user_name. fatal: unable to access 'https://github.com/user_name/Code.git/': The requested URL returned error: 403

    Error msg: $ git push remote: Permission to xxx/Code.git denied to xxxxxx. fatal: unable to access ' ...

  6. 关于php中 json_encode 编码成json数据参数说明

    JSON_UNESCAPED_SLASHES   编码不要转义符 \ 反斜杠 JSON_UNESCAPED_UNICODE   编码不转义成 unicode 字符串 如果如果多个参数可以用 | 隔开添 ...

  7. 利用node.js来实现长连接/聊天(通讯实例)

    首先: 需要在服务器端安装node.js,然后安装express,socket.io这两个模块,并配置好相关的环境变量等. 其次: 服务端代码如下: var app = require('expres ...

  8. Java 常见数据交换格式——xml、json、yaml

    目录 数据交换格式介绍 XML 使用DOM方式解析 使用SAX方式解析 使用DOM4J方式解析 使用JDOM方式解析 JSON 使用JSONObject方式将数据转换为JSON格式 利用JSONObj ...

  9. 'python'不是内部或外部命令,也不是可运行程序或批处理文件

    配置两个环境变量: 我的电脑——属性——高级系统设置——环境变量——用户变量——path(新建) 1.配置python\python.exe所在的路径       path新建:C:\Users\Py ...

  10. C#中字符串转日期类型

    1,yyyyMMdd DateTime date = DateTime.ParseExact(", "yyyyMMdd", System.Globalization.Cu ...