category | type | title | cols | toc |
---|---|---|---|---|
Components |
General |
Icon |
1 |
false |
Semantic vector graphics.
We provide semantic name for every icon, and naming rules are as follows:
-o
, for example, question-circle
(a full circle) and question-circle-o
(an empty circle);[name]-[shape?]-[outline?]-[direction?]
.
?
means is optional.
See more design detail at here.
Use tag <Icon />
to create an icon and set its type in the type prop, for example:
<Icon type="add_location" />
/* create the font file and setting a new font name and the address of url */
@font-face
{
font-family: myFirstFont;
src: url('×××.ttf'),
url('×××.eot'); /* IE9 */
font-weight: normal;
font-style: normal;
font-display: block;
}
/* Set the class name to set the priority of the font just determined */
.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;
}
/* Define the font used in the class name, and use pseudo-classes to display the corresponding style */
.icon-clubs:before {
content: "\e918";
}
<Icon style={{color:'green'}} customFontName="myFirstFont" type="maozi" />
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);
the details of methods is to look here[choerodon-ui-icon](https://www.yuque.com/docs/share/938b2da6-2066-472d-8d58-ca85990791be?# 《choerodon-ui-icon》)
Click the icon and copy the code。
import IconSet from 'site/theme/template/IconSet';
ReactDOM.render(<IconSet className="icons" />, mountNode);
You can set style
and className
for size and color of icons because they are still fonts in essence.
<Icon type="add_location" style={{ fontSize: 16, color: '#08c' }} />
Property | Description | Type | Default |
---|---|---|---|
type | Type of choerodon ui icon | string | - |
customFontName | custom the font | string | - |
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )