@clayui/icon

ClayIcon component

Usage no npm install needed!

<script type="module">
  import clayuiIcon from 'https://cdn.skypack.dev/@clayui/icon';
</script>

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