Icon
View in LexiconIcons are a visual representation of an idea and/or action.
| install | yarn add @clayui/icon |
|---|---|
| version |  |
| use | import Icon from '@clayui/icon'; |
Table of Contents
Icon List
Language Flags
Best Practices
For Icons, we use SVG elements that link to an SVG sprite. So, it becomes necessary to pass a parameter that points to a path where this spritemap is located.
If you are using the spritemap from @clayui/css you can download that svg here.
<ClayIcon symbol="heart" spritemap={spritemap} />Using Context
For V3, an API was added to utilize context for passing spritemap down
instead of having to pass the prop everywhere.
Add import { ClayIconSpriteContext } from "@clayui/icon" use the context as a provider. <ClayIconSpriteContext.Provider value="path/to/sprite.svg">.
<ClayIconSpriteContext.Provider value="/icons.svg">
<ClayIcon symbol="add-cell" />
</ClayIconSpriteContext.Provider>Table of Contents