Icons

Out-of-the-box icon components in jimu-icons.

import { PhoneFilled } from 'jimu-icons/filled/application/phone'

ReactDOM.render(<PhoneFilled size='m' color='#050505' />, root)
Copy

The size of the icon

---

Standard size

The size of the icon component is standardized:

--Size--	--Pixel--
s	12px
m	16px
l	20px

Any size

It is recommended to use the standardized sizes (s, m, l). If you must use the exact value as the size of the icon, you can use the numeric size:

import { PhoneFilled } from 'jimu-icons/filled/application/phone'

ReactDOM.render(<PhoneFilled size={50} />, root)
Copy

Use icon in button component

The size of the icon in the button follows the standard:

Button size	Icon size
sm	m
default	m
lg	l

How to use svg resources directly

---

The svg used by icon components is placed under jimu-icons/svg/, if you want to use the svg directly, here is an example:

import { Icon } from 'jimu-ui'
import svg from 'jimu-icons/svg/filled/application/phone.svg'

export const Component = (props) => {
  return <Icon size={12} icon={svg}></Icon>
}
Copy

To see all the props supported by the Icon component, refer to this story.

Support preview icons for RTL

---

SVG component

A new component SVG has been added, which supports both src and srcRTL props. When in RTL and autoFlip is true, srcRTL will be used first. To see all the props supported by the SVG component, refer to this story.

RTL icons

There are three types of icons under RTL:

1. (No corner mark) Icon that does not need to be flipped, no need to set up autoFlip
2. (Blue corner mark) Icon that automatically mirror flip, need to set autoFlip=true (Not ready yet)
3. (Purple corner mark) Icon that automatically use *--rtl.svg as srcRTL, need to set autoFlip=true

List of icons