@elemental-ui-alpha/icon
v0.0.2
Published
Icons are used to visually communicate parts of your application and available actions.
Downloads
95
Readme
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** icons
All 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>
);