Icon
Icon components, in addition to the built-in common icons, you can also customize the introduction of SVG icons.
<Icon> Vector graphics implemented by font.
Usage
import { Icon } from 'rsuite';Examples
Default
Spin and Pulse
Rotate and flip
Size
Stack
Custom Icon
Custom Icon to render an externally-introduced SVG file.
You also need to configure SVG loader in webpack to use svg-sprite-loader
{
test: /\.svg$/,
use: [{
loader: 'svg-sprite-loader',
options: {
symbolId: 'icon-[name]'
}
}]
}Svg icon color
If you need the svg icon color to match the text color, you can use currentColor to ensure that your fill,stroke colors match the font color.If you used svg-sprite-loader, you should set currentColor for use element.
Props
<Icon>
| Property | Type (Default) |
Description |
|---|---|---|
| classPrefix | string ('icon') |
The prefix of the component CSS class |
| componentClass | React.ElementType ('i') |
You can use a custom element type for this component |
| fixedWidth | boolean | Fixed icon width because there are many icons with uneven size |
| flip | enum: 'horizontal', 'vertical' | Flip the icon |
| icon * | union: string,SvgSymbol | Icon name |
| inverse | boolean | Inverse color |
| pulse | boolean | Use pulse to have it rotate with 8 steps |
| rotate | number | Rotate the icon |
| size | enum: 'lg', '2x', '3x', '4x', '5x' | Sets the icon size |
| spin | boolean | Dynamic rotation icon |
| stack | enum: '1x', '2x' | Combine multiple icons |
| svgStyle | React.CSSProperties | Set SVG style when using custom SVG Icon |
<IconStack>
| Property | Type (Default) |
Description |
|---|---|---|
| classPrefix | string ('icon') |
The prefix of the component CSS class |
| size | enum: 'lg', '2x', '3x', '4x', '5x' | Sets the icon size |