README
title: 'Icon' description: 'Icons are a visual representation of an idea and/or action.' lexiconDefinition: 'https://liferay.design/lexicon/core-components/icons/' packageNpm: '@clayui/icon'
import {Icon, IconWithContext} from '$packages/clay-icon/docs/index'; import IconSearch from '$clayui.com/src/components/IconSearch'; import icons from '$clayui.com/static/js/icons-autogenerated.json';
Icon List
Language Flags
<IconSearch iconLabelFormatter={(icon) => icon.aliases.join(' - ')} label="Search Flags" placeholder="Search Flags..." source={flags} />
Best Pratices
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.
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">
.