Search code examples
reactjsantdicon-fonts

antd - How to generate scriptUrl in Custom Font Icon

I want to add a play icon to my antd-Button component in (React), I tried to follow antd-Icon documentation and Icon font help without success in generating scriptUrl

From official docs:

const MyIcon = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generated by iconfont.cn
});

ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);

scriptUrl is The URL generated by iconfont.cn project.

The property scriptUrl should be set to import the SVG sprite symbols.

Here is a snippet from my code:

const PlayIcon = Icon.createFromIconfontCN({
  scriptUrl: '', // How to generate url?
});

// Button inside component
<Button shape="circle" onClick={someAction}>
  <PlayIcon type="icon-play"/>
</Button>
Solution

  • When you have your account in iconfont.cn,

    • go to the Icon & Project

    • goto "My project"

    • click the "view the online link" to get it

    enter image description here

    Side note,

    since they are dropping the support for component in favor svg as component. you may prefer download the svg y do

    import { Icon } from 'antd';
import PlayIconSvg from 'path/to/playIcon.svg'; // path to your '*.svg' file.

ReactDOM.render(
  <Icon component={PlayIconSvg} />,
  mountNode
);