DynamicIcon 自定义 Iconfont 图标组件

如果项目中使用的是 0.x 版本的基础组件(@icedesign/base, @ali/ice, @alife/next),请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @icedesign/dynamic-icon@0.1.8 -S

DynamicIcon 组件,相比 Icon,可以从 http://iconfont.cn 自定义图标集,同时内置了一些扩展的图标集合。

自定义 iconfont.cn 项目使用

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import DynamicIcon from '@icedesign/dynamic-icon';
  4. // 使用 custom 生成自定义 ICON 组件
  5. const CustomIcon = DynamicIcon.create({
  6. fontFamily: 'iconfont',
  7. prefix: 'icon',
  8. css: 'https://at.alicdn.com/t/font_1472628097_7496383.css',
  9. });
  10. class App extends Component {
  11. state = {};
  12. render() {
  13. return <CustomIcon type="dingding" />;
  14. }
  15. }
  16. ReactDOM.render(<App />, mountNode);

custom 方法参数说明

自定义类型 type 说明

DynamicIcon 自定义 Iconfont 图标组件 - 图1

CustomIcon 组件的 type 值其实是 iconfont.cn 每一个图标的 symbol 名称,获取方法是在 iconfont.cn 后台选择复制代码,如结果是 icon-dianpu,同时配置的 prefixicon ,此图标的 type 类型即为 dianpu

注意:如果您在同一个项目中引入多个 iconfont.cn 的项目,请确保项目的 font-familysymbol prefix 都不相同,以避免全局命名的冲突。

QA

Q 如何从 http://iconfont.cn 获取项目信息?

A 进入 iconfont.cn 的项目列表,选择 Font class 可以获取项目的(1)在线 CDN 地址

选择(2)更多操作 - 项目信息可以查看和修改项目的 font-familysymbol prefix

DynamicIcon 自定义 Iconfont 图标组件 - 图2

代码示例

简单的用法

本 Demo 演示最基础的用法。

DynamicIcon 自定义 Iconfont 图标组件 - 图3

查看源码在线预览

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import DynamicIcon from '@icedesign/dynamic-icon';
  4. import { Button } from '@alifd/next';
  5. const CustomIcon = DynamicIcon.create({
  6. fontFamily: 'iceicon2',
  7. prefix: 'ice-icon-stable',
  8. css: 'https://at.alicdn.com/t/font_107674_7dns782b1jsb57b9.css'
  9. });
  10. class App extends Component {
  11. state = {};
  12. render() {
  13. return (
  14. <div>
  15. 自定义图标集图标:
  16. <div>
  17. <Button type="primary">
  18. <CustomIcon size="s" type="qrcode" /> 你好世界
  19. </Button>
  20. </div>
  21. <div>
  22. <CustomIcon type="cascades" />
  23. </div>
  24. </div>
  25. );
  26. }
  27. }
  28. ReactDOM.render(<App />, mountNode);

示例图标

展示更多的用法

DynamicIcon 自定义 Iconfont 图标组件 - 图4

查看源码在线预览

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import CopyToClipboard from 'react-copy-to-clipboard';
  4. import { Message } from '@alifd/next';
  5. import DynamicIcon from '@icedesign/dynamic-icon';
  6. const CustomIcon = DynamicIcon.create({
  7. fontFamily: 'iceicon2',
  8. prefix: 'ice-icon-stable',
  9. css: 'https://at.alicdn.com/t/font_107674_7dns782b1jsb57b9.css'
  10. });
  11. const all = [
  12. 'bangzhu',
  13. 'cascades',
  14. 'home2',
  15. 'activity',
  16. 'qrcode',
  17. 'light',
  18. 'link',
  19. 'copy',
  20. 'creative',
  21. 'phone',
  22. 'angle-down',
  23. 'edit',
  24. 'hourglass',
  25. 'coupons',
  26. 'repair',
  27. 'shopcar',
  28. 'cross',
  29. 'clock',
  30. 'search',
  31. 'message',
  32. 'exchange',
  33. 'delete',
  34. 'angle-up',
  35. 'redpacket',
  36. 'speaker',
  37. 'transfer-left',
  38. 'transfer-right',
  39. 'customize',
  40. 'down',
  41. 'publish',
  42. 'attachment',
  43. 'eye',
  44. 'location',
  45. 'backward',
  46. 'forward',
  47. 'rmb',
  48. 'notice',
  49. 'yonghu',
  50. 'shop',
  51. 'fans2',
  52. 'chart',
  53. 'lock',
  54. 'code',
  55. 'horn',
  56. 'home',
  57. 'bell',
  58. 'person',
  59. 'bold',
  60. 'background-color',
  61. 'font-color',
  62. 'underline',
  63. 'italics',
  64. 'font-size',
  65. 'ol-list',
  66. 'align-center',
  67. 'align-flex',
  68. 'float-full',
  69. 'float-left',
  70. 'quote',
  71. 'align-right',
  72. 'align-left',
  73. 'ul-list',
  74. 'store',
  75. 'topic',
  76. 'anchor',
  77. 'video',
  78. 'sucai',
  79. 'picture',
  80. 'gif',
  81. 'task',
  82. 'guanbi',
  83. 'question',
  84. 'mail',
  85. 'image',
  86. 'question2',
  87. 'key',
  88. 'content',
  89. 'edit2',
  90. 'menu',
  91. 'collapse',
  92. 'correct',
  93. 'directory',
  94. 'fans',
  95. 'compass',
  96. 'quote2',
  97. 'gif2',
  98. 'pin',
  99. 'video2',
  100. 'item',
  101. 'material',
  102. 'shezhi',
  103. 'skin_light',
  104. 'requ'
  105. ];
  106. class App extends Component {
  107. copied = () => {
  108. Message.success('复制成功!');
  109. };
  110. renderIcon = (type, idx) => {
  111. return (
  112. <div
  113. style={{
  114. display: 'inline-block',
  115. minWidth: '150px',
  116. marginBottom: '15px',
  117. cursor: 'pointer'
  118. }}
  119. key={idx}
  120. >
  121. <CustomIcon size="large" type={type} />
  122. <CopyToClipboard text={type} onCopy={this.copied}>
  123. <span style={{ marginLeft: '5px' }}>{type}</span>
  124. </CopyToClipboard>
  125. </div>
  126. );
  127. };
  128. render() {
  129. return <div>{all.map(this.renderIcon)}</div>;
  130. }
  131. }
  132. ReactDOM.render(<App />, mountNode);

相关区块

DynamicIcon 自定义 Iconfont 图标组件 - 图5

暂无相关区块