Icon
Icons are used to visually communicate core parts of the product and available actions. They can act as wayfinding tools to help users more easily understand where they are in the product, and common interaction patterns that are available.
import { ChevronRightIcon } from '@elemental-ui-alpha/icon/ChevronRightIcon'; // prefer explicit entry point
import { ChevronRightIcon, ... } from '@elemental-ui-alpha/icon'; // only when using **many** iconsAll Icons
Find the icon that meets your needs.
const [match, setMatch] = React.useState('');
const onlyMatches = i =>
i
.slice(0, -4) // remove "Icon"; avoid invalid matches
.toLowerCase()
.includes(match.toLowerCase());
return (
<Stack gap="medium">
<TextField
label="Search Icons"
labelVisibility="hidden"
onChange={e => setMatch(e.target.value)}
placeholder="Search..."
type="search"
value={match}
/>
<div
style={{
display: 'grid',
gap: 12,
gridTemplateColumns: 'repeat(auto-fill, minmax(144px, 1fr))',
}}
>
{Object.keys(icons)
.sort()
.filter(onlyMatches)
.map(key => {
let Icon = icons[key];
const c = 'center';
return (
<Flex align={c} direction="vertical" justify={c} paddingY="large">
<Icon fill="B400" />
<Box marginTop="small">{Icon.displayName}</Box>
</Flex>
);
})}
</div>
</Stack>
);