antd - Как сгенерировать scriptUrl в значке пользовательского шрифта

Я хочу добавить значок воспроизведения к моему antd-Button компоненту в (React), Я пытался следовать документации antd-Icon и справка по шрифтам значков без успеха при создании scriptUrl

Из официальных документов:

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

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

scriptUrl — это URL-адрес, сгенерированный проектом iconfont.cn.

Свойство scriptUrl должно быть установлено для импорта символов спрайта SVG.

Вот фрагмент моего кода:

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

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

reactjs antd icon-fonts
person Dennis Vash    schedule 16.01.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Когда у вас есть учетная запись на iconfont.cn,

  • иди в Icon & Project

  • перейти к "Мой проект"

  • нажмите «просмотреть онлайн-ссылку», чтобы получить его

введите здесь описание изображения

Примечание

поскольку они отказываются от поддержки компонента в пользу svg в качестве компонента. вы можете предпочесть загрузить 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
);
person Yichaoz    schedule 17.01.2019
comment
В моем случае import ... from '....svg' не сработало, потому что результирующее содержимое символа было данными в кодировке base-64. Итак, <Icon component={mySvg} /> не сработало. Большое спасибо за разъяснение того, как генерировать код, вы сделали мой день. - person Geradlus_RU; 29.09.2019
comment
Но как добавить значок в «Мой проект»?? - person avalanche1; 01.04.2020
comment
Просто наведите курсор на значок, нажмите на корзину, чтобы добавить в корзину. после того, как вы закончите, щелкните значок корзины в правом верхнем углу и нажмите «Добавить в проект». - person Yichaoz; 02.04.2020
comment
я не вижу файл .js, но если вы измените .svg на .js, он сработает - person David Kong; 24.05.2021