Icon 图标
语义化的矢量图形。
图标的命名规范
我们为每个图标赋予了语义化的命名,命名规则如下:
- 实心和描线图标保持同名,用
-o
来区分,比如question-circle
(实心) 和question-circle-o
(描线); - 命名顺序:
[图标名]-[形状?]-[描线?]-[方向?]
。
?
为可选。
完整的图标设计规范请访问 图标规范。
如何使用
使用 <Icon />
标签声明组件,指定图标对应的 type 属性,示例代码如下:
<Icon type="add_location" />
如何自定义项目的图标
font 库 自定义方式
/* 建立字体文件,设置你新建立的字体名称以及对应的url 地址 */
@font-face
{
font-family: myFirstFont;
src: url('×××.ttf'),
url('×××.eot'); /* IE9 */
font-weight: normal;
font-style: normal;
font-display: block;
}
/* 设置类名把刚刚确定的字体设置优先级最高 */
.c7ntest1 {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'myFirstFont' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 定义类名使用的字体,利用伪类来实现对应样式的展现 */
.icon-clubs:before {
content: "\e918";
}
<Icon style={{color:'green'}} customFontName="myFirstFont" type="maozi" />
- 第二种方案使用svg引用第三方库实现
import { Icon } from 'choerodon-ui';
import { createFromIconfontCN } from '@ant-design/icons';
const MyIcon = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_2066932_6wpzydfnv8g.js', // 在 iconfont.cn 上生成
});
ReactDOM.render(
<>
<MyIcon type="icon-maozi" />
</>,
mountNode);
具体的方案操作详细查看choerodon-ui-icon
图标列表
点击图标复制代码。
API
由于图标字体本质上还是文字,可以使用 style
和 className
设置图标的大小和颜色。
<Icon type="add_location" style={{ fontSize: 16, color: '#08c' }} />
图标的属性说明如下:
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 图标类型 | string | - |
新增功能支持svgIcon: 必须配置scriptUrl属性才能增加这个功能
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 图标类型 | string | - |
width | svg 宽度 | string | number | - |
height | svg 高度 | string | number | - |
scriptUrl | iconfont 生成链接配置 | string | string[] | - |
同时也支持生成自定义icon的方法
import { Icon } from 'choerodon-ui';
const {createFromIconfontCN} = Icon;
const MyIcon = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_2066932_o2wp0dratpi.js', // 在 iconfont.cn 上生成
});
class App extends React.PureComponent {
render() {
return (
<div>
<MyIcon width={32} height={32} type="icon-maozi" />
</div>
);
}
}
import { Icon } from 'choerodon-ui';
class App extends React.PureComponent {
render() {
return (
<div>
<Icon scriptUrl = '//at.alicdn.com/t/font_2066932_o2wp0dratpi.js' width={32} height={32} type="icon-maozi" />
</div>
);
}
}
当前内容版权归 Choerodon UI 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Choerodon UI .