react项目里如何使用阿里字体图标

素颜马尾好姑娘i 2023-01-15 08:30 537阅读 0赞

1.首先我们看一下**Ant Design官方文档的使用示例**： 我们主要关注两个地方 **★★★★★**

① createFromIconfontCN方法中scriptUrl的属性值，对应的就是我们自定义使用的字体图标的js路径。  
② 字体图标的名字

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70]  
2.去阿里矢量图官网，挑选需要的字体图标加入购物车，然后新建项目，将购物图标加入项目。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70 1]  
3.点击资源管理，点击进入我的项目，就可以看到我们新建的项目以及我们加入项目中的字体图标。在Symbol下，查看在线链接即可获得当前项目图标库的**阿里CDN托管目录路径参数值**。就是对应的1中的createFromIconfontCN方法中scriptUrl的属性值;图标中文名下的icon-xxxx对应的就是1中的图标的名称。  
![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20210511161822292.png?x-oss-process=image/watermark,type\_ZmFuZ3poZW5naGVpdGk,shadow\_10,text\_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5,size\_16,color\_FFFFFF,t\_70][https_img-blog.csdnimg.cn_20210511161822292.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70]

4.对应的我们的react实现代码和项目实现效果

import React from 'react';
    import {  createFromIconfontCN } from '@ant-design/icons';
    import style from './style.less';
    
    export const index = () => { 
      const IconFont = createFromIconfontCN({ 
        scriptUrl: '//at.alicdn.com/t/font_2541040_t1n2jp55tam.js',
      });
      return (
        <div className={ style.contentContainer}>
          <IconFont type="icon-aixin" />
          <IconFont type="icon-daka" />
          <IconFont type="icon-dayin" />
          <IconFont type="icon-gaishuai" />
          <IconFont type="icon-gerenshezhi" />
          <IconFont type="icon-jiaoxue" />
          <IconFont type="icon-rili" />
          <IconFont type="icon-tuandui" />
          <IconFont type="icon-xinjian" />
          <IconFont type="icon-yiduyoujian" />
          <IconFont type="icon-zixun" />
        </div>
      );
    };
    
    export default index;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70]: /images/20221022/93765c9e3f9145e98d459fda5478f947.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70 1]: /images/20221022/d8b0aa1a60944ec593087ea271673412.png
[https_img-blog.csdnimg.cn_20210511161822292.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70]: /images/20221022/5ed2cb2ec1174e6b9d45f570bb1e56fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70 2]: /images/20221022/ae3dfb5c7d51438ab8c1f36a62516aa4.png