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

iconfont.cn图标下载及使用教程
  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中引入就行了
### 如何在 React 18 项目中下载并使用阿里巴巴矢量图 #### 安装依赖包 为了能够在 React 项目中顺利集成和使用 Alibaba 的矢量图标库,首先需要安装 `@ant-design/icons` 和其他必要的依赖项。 ```bash npm install @ant-design/icons react-icons axios ``` #### 创建 Icon 组件 创建一个新的 JavaScript 文件用于配置和初始化图标组件。此文件通常命名为 `IconConfig.js` 或者类似的名称: ```javascript import { createFromIconfontCN } from '@ant-design/icons'; const IconFont = createFromIconfontCN({ scriptUrl: [ '//at.alicdn.com/t/c/font_3567515_xmfi410loyq.js', ], }); export default IconFont; ``` 这段代码定义了一个名为 `IconFont` 的常量来加载来自阿里云的自定义字体资源[^1]。 #### 使用图标 一旦完成了上述设置,在任何 JSX 文件里都可以通过如下方式调用这些图标: ```jsx import React from 'react'; import IconFont from './path/to/your/iconconfig'; // 替换成实际路径 function MyComponent() { return ( <div> {/* 调用特定图标 */} <IconFont type="icon-javascript" /> <IconFont type="icon-java" /> <IconFont type="icon-shoppingcart" /> {/* 如果是 Ant Design Menu 中使用 */} <Menu.Item key="mail"> <IconFont type="icon-email" /> Mail </Menu.Item> </div> ); } ``` 这里展示了两种不同的场景下如何应用图标:一种是在普通的 HTML 元素旁边;另一种则是在 Ant Design 的菜单项内部[^2][^5]。 #### 更新图标集 每当向项目添加新图标时,请务必访问 [iconfont.cn](http://www.iconfont.cn/) 并重新获取最新的 `scriptUrl` 地址,以确保所有最新添加的图标都能正常工作[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值