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. composer包(发布到github上)同步到Packagist

    在上一篇文章里面,探讨了如何一步步建立composer包–创建你的一个composer包 创建完成后,我们需要做的就是讲自建的包发布到Packagist上.至于说什么是Packagist,这个就不用我 ...

  2. Linux(CentOS7)下如何配置多个JDK环境变量

    一.Linux版本 二.复制粘贴多个JDK出来,如下 cp -R jdk1.7.0_80/ jdk1.7.0_80-2 cp -R jdk1.7.0_80/ jdk1.7.0_80-3 三.配置多个J ...

  3. video相关参数、操作和事件

    1.参数 video是h5的新特性(虽然新了很多年了),使得枯燥的页面有了很多生机.html代码示例: <video id="kingdom-video" src=" ...

  4. [LeetCode] 19. 删除链表的倒数第N个节点

    题目链接:https://leetcode-cn.com/problems/remove-nth-node-from-end-of-list/ 题目描述: 给定一个链表,删除链表的倒数第 n 个节点, ...

  5. Eclipse 从git导入maven多模块项目

    原文地址:https://blog.csdn.net/xiongyouqiang/article/details/78903975 以https://github.com/xiongyouqiang/ ...

  6. url 的正则表达式:path-to-regexp

    概述 该工具库用来处理 url 中地址与参数,能够很方便得到我们想要的数据. js 中有 RegExp 方法做正则表达式校验,而 path-to-regexp 可以看成是 url 字符串的正则表达式. ...

  7. 大神教你如何解决Linux系统80端口被占用

    有Linux在centos下面安装webmail服务遇到80端口被占用的问题,导致无法继续安装,下面详细介绍下Linux如何查看.查找.关闭监听80端口服务以更好的的解决80端口被占用的问题. 一.查 ...

  8. 开发中,IDEA常用的快捷键

    Settings文件: Ctrl+Alt+S 搜索文件:Ctrl+Shift+N 全文搜索: Ctrl+Shift+F 全文替换: Ctrl+Shift+R 搜索内容: Ctrl+F 内容替换: Ct ...

  9. 完全自主创建Wrapper Tomcat容器

    Wrapper Tomcat 使用说明1. Wrapper Tomcat 简介1) Wrapper Tomcat 是使用Apache Tomcat 整合 Java Service Wrapper 的一 ...

  10. Go之运算符

    逻辑运算符用于连接布尔型表达式.在Java中不同于数学的逻辑表达 3<X<5 ,java 中应该写成 x>3 & x<5 "&" 和&quo ...