@clayui/icon

---

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
• Best Pratices
  • Using Context

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">.