Software developer

Developer of webapps and more since 2016

18 Aug 2021

776
Make use of iconfont.cn icons in your projects

Tags

I recently discovered the website iconfont.cn. This website is a project from our chinese "fellows" from alibaba network who aims to provide icons and illustrations to web developers.

To make use of these icons in you projects, do one of:

  • download the icons by copying the svg code one by one (tedious !)
  • create a collection of icons and add them to a project, create a private link for that project and use that link in the npm library @antd/icons :
   npm install --save @ant-design/icons

import { createFromIconfontCN  } from '@ant-design/icons';

const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
  
});

ReactDOM.render(
  <div className="icons-list">
      <IconFont type="icon-tuichu" />
      <IconFont type="icon-facebook" />
      <IconFont type="icon-twitter" />
  </div>,
  mountNode,
);

As mentioned in their github repository, @ant-design/icons is available in React, VueJs and Angular.

link to the documentation of ant design icons