Icon List
The default icon set includes filled, outlined, and AI icons. React uses @fibrous/semi-icons-react; Vue uses @fibrous/semi-icons-vue. Filled, outlined, and monochrome AI icons inherit the CSS color property. Bicolor and multicolor AI icons have default colors, which can be changed through fill.
The color icon set is imported from the /lab entry of the corresponding icon package. It ships with that package, requires no separate installation, and its colors cannot be changed.
Demos
How to import
import Icon, { IconHome } from '@fibrous/semi-icons-react';
import { IconAvatar, IconCard } from '@fibrous/semi-icons-react/lab';Basic usage
Import icons from the icon package for your framework.
Code
import { IconHome } from '@fibrous/semi-icons-react';
export default function IconDemo() {
return <IconHome />;
}Rotate & Spin
Icons support size, rotation, and spin options.
Code
import { IconHome, IconEmoji, IconSpin } from '@fibrous/semi-icons-react';
export default function IconDemo() {
return (
<div>
<IconHome size="small" />
<IconEmoji rotate={180} />
<IconSpin spin />
</div>
);
}Size
You can change the
font-sizeto change the icon size
The Icon component encapsulates the size attribute, which makes it easier to define the icon size. It supports extra-small (8x8), small (12x12), default (16x16), large (20x20), extra-large (24x24), When size is specified as inherit, the icon size inherits the current context font size.
Code
import React from 'react';
import { IconSearch, IconHelpCircle, IconAlertCircle, IconMinusCircle, IconPlusCircle, IconPlus, IconRefresh } from '@fibrous/semi-icons-react';
export default function IconDemo() {
const types = [<IconSearch key="search" />, <IconHelpCircle key="help-circle" />, <IconAlertCircle key="alert-circle" />, <IconMinusCircle key="minus-circle" />, <IconPlusCircle key="plus-circle" />, <IconPlus key="plus" />, <IconRefresh key="refresh" />];
const sizes = ['extra-small', 'small', 'default', 'large', 'extra-large'];
let icons = types.map((type, i) => {
return (
<div key={i} style={{ marginBottom: 4 }}>
{sizes.map((size) => React.cloneElement(type, { size, key: size }))}
</div>
);
});
return <>{icons}</>;
}Color
Monochrome icons inherit the container's CSS color property. You can also set the Icon's style to change its color.
Code
import { IconLikeHeart, IconFlag, IconLock, IconUnlock } from '@fibrous/semi-icons-react';
export default function IconDemo() {
return (
<div>
<div style={{ color: '#E91E63' }}>
<IconLikeHeart size="extra-large" />
<IconFlag size="extra-large" />
</div>
<br />
<div>
<IconLock style={{ color: '#6A3AC7' }} size="extra-large" />
<IconUnlock style={{ color: '#9C27B0' }} size="extra-large" />
</div>
</div>
);
}Bicolor icon
The color of the two-color icon can be set through the fill attribute, which supports string and string[].
Code
import { IconAIWandLevel2, IconAIFilledLevel2 } from '@fibrous/semi-icons-react';
export default function IconDemo() {
return (
<div>
<IconAIWandLevel2 fill={['var(--semi-color-danger)', 'var(--semi-color-success)']} style={{ marginRight: 10 }} size="extra-large" />
<IconAIFilledLevel2 fill="var(--semi-color-success)" size="extra-large" />
</div>
);
}Multicolor icons
Multicolor icons accept up to four colors. Set the colors through fill, which supports string and string[].
Code
import { IconAIBellLevel3, IconAIWandLevel3, IconAIFilledLevel3 } from '@fibrous/semi-icons-react';
export default function IconDemo() {
return (
<div>
<IconAIBellLevel3 style={{ marginRight: 10 }} size="extra-large" />
<IconAIWandLevel3 fill={['var(--semi-color-danger)', 'var(--semi-color-success)', 'var(--semi-color-primary)', 'var(--semi-color-warning)']} style={{ marginRight: 10 }} size="extra-large" />
<IconAIFilledLevel3 fill={['var(--semi-color-primary)', 'var(--semi-color-success)']} size="extra-large" />
</div>
);
}Custom icon
You can use custom icons to pass in Icon components Icon component supports size, rotate, spin and other attributes
React accepts custom SVG content through the svg prop.
Code
import { useId } from 'react';
import { Icon } from '@fibrous/semi-ui-react';
function CustomIcon() {
const maskId = useId();
return (
<svg aria-hidden="true" width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="11" fill="#FBCD2C" />
<mask id={maskId} style={{ maskType: 'alpha' }} maskUnits="userSpaceOnUse" x="1" y="1" width="22" height="22">
<circle cx="12" cy="12" r="11" fill="#A2845E" />
</mask>
<g mask={`url(#${maskId})`}>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M11.9996 17.7963C13.7184 17.7963 15.2479 16.3561 16.0881 14.2048C16.6103 13.9909 17.1072 13.3424 17.334 12.4957C17.629 11.3948 17.5705 10.4118 16.7665 10.1059C16.6885 6.27115 15.1754 4.78714 11.9996 4.78714C8.82412 4.78714 7.31097 6.27097 7.2328 10.1052C6.42711 10.4103 6.36828 11.394 6.66349 12.4957C6.89064 13.3435 7.38849 13.9926 7.91145 14.2056C8.7518 16.3565 10.2811 17.7963 11.9996 17.7963ZM20.0126 23C20.34 23 20.5906 22.7037 20.4686 22.3999C19.6099 20.2625 16.1444 18.6636 12 18.6636C7.85555 18.6636 4.39008 20.2625 3.53142 22.3999C3.40937 22.7037 3.65999 23 3.9874 23H20.0126Z"
fill="white"
/>
</g>
</svg>
);
}
export default function IconDemo() {
return (
<div>
<Icon svg={<CustomIcon />} />
<Icon svg={<CustomIcon />} rotate={180} />
</div>
);
}Use svgr to convert svg files into ReactComponent
If the icons provided by Semi are not enough to meet business needs, you can also introduce custom icons through @svgr/webpack and use them as React components
// webpack.config.js
{
test: /\.svg$/,
use: ['@svgr/webpack'],
}
import { Icon } from '@fibrous/semi-ui-react';
import StarIcon from './star.svg';
<Icon svg={<StarIcon />} />API reference
Icon
Props
| Property | Description | Type | Default |
|---|---|---|---|
| fill | Fill colors for bicolor and multicolor icons, as a string or an array of strings. When set, Icon passes it to the svg element with cloneElement. | string | string[] | - |
| prefixCls | Class name prefix; the root element's class is <prefixCls>-icon. | string | "semi" |
| rotate | Rotation angle in integer degrees. Non-integer values are ignored. | number | - |
| size | Icon size: extra-small, small, default, large, extra-large or inherit, which uses the surrounding font size. | IconSize | "default" |
| spin | Enables the spinning animation. | boolean | false |
| svg | Icon content as a React element, such as <StarIcon />. | ReactNode | - |
| type | Adds an icon type class name, <prefixCls>-icon-<type>, to the root element. | string | - |
className, style, onClick, aria-* and other native attributes land on the outer span. style is merged with the transform that rotate produces, and takes precedence when both set the same property.
Accessibility
ARIA
- An Icon is decorative by default and has
aria-hidden="true", so screen readers skip it. Keep the default when text sits next to the icon, or when the icon is inside a named button - When the icon itself conveys information, pass
aria-label(oraria-labelledby); the Icon then has the img role - For a button or link that only holds an icon, set
aria-labelon the button or link rather than the icon - A focusable icon (e.g. used directly as a Tooltip trigger) is not hidden; give it an
aria-label, and the Tooltip content serves as its description
Code
import { IconHome } from '@fibrous/semi-icons-react';
export default function IconDemo() {
return <IconHome aria-label="返回首页" />;
}- Built-in SVG icons have
aria-hidden="true". Set the same attribute on custom SVG content, and give the outer Icon its accessible name.