ant design 使用自定義阿里巴巴圖標

在 react 中,使用ant design 框架中的自定義圖標

  1. 首先,複製例子中的代碼:
    import { createFromIconfontCN } from '@ant-design/icons';
    
    const IconFont = createFromIconfontCN({
      scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
    });
    
    其中,scriptUrl 是需要自己生成的。
  2. 那麼接下來打開阿里巴巴圖標官網 ,登錄後,選擇圖標並加入購物車,同時添加進項目裏面。
  3. 進入項目,點擊Symbol選項卡,然後生成項目鏈接
  4. 把上面代碼中的 scriptUrl 替換成新生成的鏈接。
  5. 之後就可以使用了:
     <IconFont type="icon-tuichu" />
    
    type就是你添加中項目裏面的圖標名稱。

注意:每次添加新圖標後,需要更新一下鏈接。上面的組件名稱iconfont可以自己定義成任何名字。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章