Icon 图标

语义化的矢量图形。

图标的命名规范

我们为每个图标赋予了语义化的命名,命名规则如下:

  • 实心和描线图标保持同名,用 -o 来区分,比如 question-circle(实心) 和 question-circle-o(描线);
  • 命名顺序:[图标名]-[形状?]-[描线?]-[方向?]

? 为可选。

完整的图标设计规范请访问 图标规范

如何使用

使用 <Icon /> 标签声明组件,指定图标对应的 type 属性,示例代码如下:

  1. <Icon type="add_location" />

如何自定义项目的图标

  1. font 库 自定义方式

    1. /* 建立字体文件,设置你新建立的字体名称以及对应的url 地址 */
    2. @font-face
    3. {
    4. font-family: myFirstFont;
    5. src: url('×××.ttf'),
    6. url('×××.eot'); /* IE9 */
    7. font-weight: normal;
    8. font-style: normal;
    9. font-display: block;
    10. }
    11. /* 设置类名把刚刚确定的字体设置优先级最高 */
    12. .c7ntest1 {
    13. /* use !important to prevent issues with browser extensions that change fonts */
    14. font-family: 'myFirstFont' !important;
    15. speak: never;
    16. font-style: normal;
    17. font-weight: normal;
    18. font-variant: normal;
    19. text-transform: none;
    20. line-height: 1;
    21. /* Better Font Rendering =========== */
    22. -webkit-font-smoothing: antialiased;
    23. -moz-osx-font-smoothing: grayscale;
    24. }
    25. /* 定义类名使用的字体,利用伪类来实现对应样式的展现 */
    26. .icon-clubs:before {
    27. content: "\e918";
    28. }
  1. <Icon style={{color:'green'}} customFontName="myFirstFont" type="maozi" />
  1. 第二种方案使用svg引用第三方库实现
  1. import { Icon } from 'choerodon-ui';
  2. import { createFromIconfontCN } from '@ant-design/icons';
  3. const MyIcon = createFromIconfontCN({
  4. scriptUrl: '//at.alicdn.com/t/font_2066932_6wpzydfnv8g.js', // 在 iconfont.cn 上生成
  5. });
  6. ReactDOM.render(
  7. <>
  8. <MyIcon type="icon-maozi" />
  9. </>,
  10. mountNode);

具体的方案操作详细查看choerodon-ui-icon

图标列表

点击图标复制代码。

API

由于图标字体本质上还是文字,可以使用 styleclassName 设置图标的大小和颜色。

  1. <Icon type="add_location" style={{ fontSize: 16, color: '#08c' }} />

图标的属性说明如下:

属性说明类型默认值
type图标类型string-

新增功能支持svgIcon: 必须配置scriptUrl属性才能增加这个功能

属性说明类型默认值
type图标类型string-
widthsvg 宽度string | number-
heightsvg 高度string | number-
scriptUrliconfont 生成链接配置string | string[]-

同时也支持生成自定义icon的方法

  1. import { Icon } from 'choerodon-ui';
  2. const {createFromIconfontCN} = Icon;
  3. const MyIcon = createFromIconfontCN({
  4. scriptUrl: '//at.alicdn.com/t/font_2066932_o2wp0dratpi.js', // 在 iconfont.cn 上生成
  5. });
  6. class App extends React.PureComponent {
  7. render() {
  8. return (
  9. <div>
  10. <MyIcon width={32} height={32} type="icon-maozi" />
  11. </div>
  12. );
  13. }
  14. }
  15. import { Icon } from 'choerodon-ui';
  16. class App extends React.PureComponent {
  17. render() {
  18. return (
  19. <div>
  20. <Icon scriptUrl = '//at.alicdn.com/t/font_2066932_o2wp0dratpi.js' width={32} height={32} type="icon-maozi" />
  21. </div>
  22. );
  23. }
  24. }