FoundationSymbol 基础符号表

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

安装方法

  1. 在命令行中执行以下命令npm install @icedesign/foundation-symbol@0.1.1 -S

基本图标集合。

基本使用

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import FoundationSymbol from '@icedesign/foundation-symbol';
  4. class App extends Component {
  5. state = {};
  6. render() {
  7. return <FoundationSymbol type="font-size" />;
  8. }
  9. }
  10. ReactDOM.render(<App />, mountNode);

图标列表

图标列表

代码示例

简单的用法

本 Demo 演示最基础的用法。

FoundationSymbol 基础符号表 - 图2

查看源码在线预览

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import FoundationSymbol from '@icedesign/foundation-symbol';
  4. class App extends Component {
  5. state = {};
  6. render() {
  7. return (
  8. <div>
  9. 自定义图标集图标:
  10. <div>
  11. <FoundationSymbol type="bangzhu" />
  12. </div>
  13. <div>
  14. <FoundationSymbol type="font-size" />
  15. </div>
  16. </div>
  17. );
  18. }
  19. }
  20. ReactDOM.render(<App />, mountNode);

示例图标

展示更多的用法

FoundationSymbol 基础符号表 - 图3

查看源码在线预览

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

相关区块

FoundationSymbol 基础符号表 - 图4

暂无相关区块