@cypress-design/react-icon v0.38.1
Icon
Install
npm install @cypress-design/react-icon
or with yarn
yarn add @cypress-design/react-icon
Usage
import Icon from '@cypress-design/react-icon'
The simple way using the Icon component
import Icon from '@cypress-design/react-icon'
export const MyButtonWithIcon = () => {
return (
<button className="flex items-center gap-[8px] p-[8px] border-1 border-red-500">
<Icon
name="object-book"
size="16"
strokeColor="blue-600"
fillColor="red-200"
className="bg-red-100"
/>
Read
</button>
)
}
We can also import each icon components separately. When we use named imports, the results becomes tree-shakable (more optimized). This means that the final bundle will not contain any of the unused icons code. Only imported icons will end up in your app or website js.
import { IconObjectBook } from '@cypress-design/react-icon'
export const MyButtonWithIcon = () => {
return (
<IconObjectBook size="16" strokeColor="indigo-600" fillColor="red-200" />
)
}
Should you need to change the color of the icon on hover
or focus
prefix the props with these words.
Here, the strokeColor
will change on hover from indigo to jade
import { IconObjectBook } from '@cypress-design/react-icon'
export const MyButtonWithIcon = () => {
return (
<button>
<IconObjectBook
size="16"
strokeColor="indigo-600"
hoverStrokeColor="jade-600"
/>
</button>
)
}
If you need the hover
or focus
effect to be triggered on the parent group, use interactiveColorsOnGroup
.
This prop will change all the pseudo prefixes to be group focused instead of triggered by the icon itself.
To achieve the same goal, in WindiCSS, we would use group-hover:
instead of hover:
.
import { IconObjectBook } from '@cypress-design/react-icon'
export const MyButtonWithIcon = () => {
return (
<button className="flex items-center gap-[8px] group hover:text-jade-800">
<IconObjectBook
size="48"
strokeColor="indigo-600"
hoverStrokeColor="jade-600"
interactiveColorsOnGroup
/>
Book
</button>
)
}
10 days ago
23 days ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
6 months ago
6 months ago
7 months ago
7 months ago
8 months ago
10 months ago
10 months ago
7 months ago
7 months ago
9 months ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago