react 使用矢量图标--阿里的矢量图

最新推荐文章于 2024-04-01 19:54:31 发布
最新推荐文章于 2024-04-01 19:54:31 发布
阅读量1k 收藏
点赞数 1
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37054603/article/details/93329937
版权
  1. 打开图标网站https://www.iconfont.cn/
  2. 登陆自己的账号进入我的项目----在上面的导航条里
  3. 新建一个项目--右边有一个紫色的加号
  4. 在上面搜索框搜索你需要的图标
  5. 找到你需要的图标鼠--标移上去 点击收藏
  6. 点击右上角的购物车添加至项目
  7. 然后下载至本地
  8. 然后把下载的文件夹解压
  9. 保留这五个文件
    1. iconfont.eot
    2. iconfont.svg
    3. iconfont.ttf
    4. iconfont.woff
    5. iconfont.css
  10. 点击demo_unicode.html--查看使用说明
  11. 在项目statics中创建一个文件夹iconfont 用来放矢量图标
  12. 把上面保留的五个文件放入iconfont这个文件夹中
  13. iconfont.css打开加相对路径  ---url 里面加./ data那个不加
  14. 把iconfont.css 当成全局样式来写 用styled-components中的createGlobalStyle组件把它变成全局组件在App.js中引入就行了
小小程序猿7
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React Native react-navigation 导航使用详解
08-28
本篇文章主要介绍了React Native react-navigation 导航使用详解，详解的介绍了react-navigation导航的使用，具有一定的参考价值，有兴趣的可以了解一下
react项目如何使用iconfont的方法步骤
10-17
主要介绍了react项目如何使用iconfont的方法步骤，这里介绍下如何在项目中配置。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React使用阿里巴巴矢量图标库
最新发布
cheung203的博客
04-01 235
【代码】React使用阿里巴巴矢量图标库。
react-full-page:使用React全屏滚动
04-28
全页React 使用React全屏滚动 import React from 'react' ; import { FullPage , Slide } from 'react-full-page' ; export default class FullPageExample extends React . Component { render ( ) { return ( < FullPage> < Slide> < h1> Inner slide content < / h1 > < / Slide > < Slide> < h1> Another slide content < / h1 > < / Slide > <
react-router-cache-route:使用类似React-Router的缓存进行路由在Vue
05-11
缓存路由 英文| 使用缓存为Vue中的keep-alive类的react-router 。 如果只想要<KeepAlive> ，请尝试 React v15 + React-Router v4 + 问题 使用Route ，前进或后退时无法缓存组件，这会导致数据丢失和交互 原因与解决方案 Route不匹配时，组件将被卸载 阅读源代码之后Route ，我们发现使用children撑起一个功能，可以帮助控制呈现行为。 隐藏而不是删除将解决此问题。 安装 npm install react-router-cache-route --save # or yarn add react-router-cache-route 用法 用CacheRoute替换Route 用CacheSwitch替换Switch （因为Switch仅保留第一个匹配的状态路由，并卸载其他匹配状态的路由） impor
react-native-image-resizer：with使用React Native调整本地图像的大小
01-31
React Native Image Resizer 一个React Native模块可以创建本地图像的缩放版本（也支持iOS上的资产库）。 React性的 React本机图像调整器 ≤0.60 1.1.0 0.61 1.2.0 建立 安装软件包： React本机> = 0.60 yarn add react-native-image-resizer cd ios && pod install React本机<= 0.59 yarn add react-native-image-resizer react-native link react-native-image-resizer 安卓 注意：在最新版本的React Native上，您可能会在Android上的Gradle构建过程中出错（ com.android.dex.DexException: Multiple dex files define Landroid/support/v7/appcompat/R$anim ）。 运行cd android && ./gradlew clean修复此问题。 手动链接 And
React使用iconfont阿里巴巴矢量图库
qq_45634989的博客
11-14 1109
React使用iconfont阿里巴巴矢量图库
【React】前端项目引入阿里图标
m0_61049675的博客
01-30 804
注意：你的icon名字 icon-sousuokuang为图片红框部分。
React 引入阿里矢量图标方法
aletal的博客
06-21 3598
React 引入阿里矢量图标方法 首选将选择好的图标添加入购物车 跳转页面如下, 如图所示,选择 Symbol, 然后点击查看在线链接. 3: 点击生成相关图片的scriptUrl 参数,如下图.注意生成的路径参数中开头的两个斜杠 : “//” 不能丢. 在React中引入,语法如图所示: 变量名称: IconFont 为自定义,可随意指定. 然后在 JSX中使用: 注意: 这里的 Ic...
【React】【Ant Design】引入阿里矢量图
是光の谢宣骞博客
08-04 782
不积硅步，无以至千里
react-split-pane：React拆分窗格组件
02-05
React拆分窗格 Split-Pane React组件，可以垂直或水平嵌套或拆分！ 正在安装 npm install react-split-pane # or if you use yarn yarn add react-split-pane # # Example Usage ` ` ` jsx < SplitPane xss=removed minSize={50} defaultSize={100}> < div> < div> < /SplitPane > < SplitPane split = " vertical " minSize =
react-reactdesigner易于配置轻量级可编辑的矢量图形在你的react组件中
08-14
react-designer - 易于配置、轻量级、可编辑的矢量图形在你的react组件中
React-Native-QRCode-Reader:使用 React Native 的二维码扫描应用
05-29
React Native 中的二维码扫描器 这个应用程序是使用 React Native 制作的。 安装 ...react-native-qrcode-scanner 教程 作者 比利时 Android -所有作品- 致谢 给使用过代码的任何人的提示 灵感 等等
React 实战 | react项目使用图标iconfont
qq_35536883的博客
07-16 4670
Iconfont平台 iconfont平台是阿里妈妈MUX倾力打造的矢量图标管理、交流平台。 设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。 如何引入React项目中 1.打开Iconfont官网，进入项目页面 ## 1.点击》下载至本地》解压文件夹 3.在项目src文件夹下创建static文件...
如何在react-native中使用阿里iconfont矢量图标
_fan的博客
01-20 1167
首先引入所需第三方库 npm install --save react-native-svg # or yarn add react-native-svg svg官网快速入门，看个10来分钟差不多了 在iconfont选择需要的图标下载 iconfont官网 1.选好图标加入购物车，点击下载素材，根据需要调整颜色大小，下载svg格式素材 2.解压后得到一个压缩包，解压后如下 3.随便找一个文本编辑器打开这四个文件，我这里使用vscode打开，主要是可以格式化。现在我们主要关注svg标签和path标签
前端react引入阿里矢量图标
weixin_47392228的博客
11-30 208
引入阿里巴巴矢量图标库
React项目中如何结合antd引入阿里图标（外联方式）
Alone_Endeavor的博客
08-30 1464
antd iconfont
react项目中引入阿里巴巴图图标库
2301_76790013的博客
07-12 226
href对应你创建阿里巴巴项目的地址。
react 使用react-viewer --save
05-25
如果你想在自己的项目中使用 react-viewer，可以通过以下命令来安装： ``` npm install react-viewer --save ``` 安装完成后，在需要使用的组件中引入即可，例如： ```javascript import ReactViewer from 'react...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值