2

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>
Dennis Vash
  • 50,196
  • 9
  • 100
  • 118

1 Answers1

3

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
);
Yichz
  • 9,250
  • 10
  • 54
  • 92
  • In my case `import ... from '....svg'` not worked cause resulting symbol content was base-64 encoded data. So, `` didn't work. Many thanks for clarifying how to generate code, you've made my day. – Geradlus_RU Sep 29 '19 at 18:57
  • But how do you add an icon to 'My project'?? – avalanche1 Apr 01 '20 at 16:00
  • Just hover the icon, click the shopping cart to add to cart. after you are done click the top right shopping cart icon and click "add to project" – Yichz Apr 02 '20 at 05:26
  • i don't see a .js file but if you change the .svg to .js it works – David Kong May 24 '21 at 06:55