@leafygreen-ui/icon v12.1.0
Icon
View on MongoDB.design
Installation
Yarn
yarn add @leafygreen-ui/icon
NPM
npm install @leafygreen-ui/icon
Example
import Icon from '@leafygreen-ui/icon';
const SomeComponent = () => <Icon glyph="Plus" fill="#FF0000" />;
Output HTML
<svg
width="16"
height="16"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
class="leafygreen-ui-1gvnm9k"
role="img"
aria-label="Beaker Icon"
>
<path
d="M10.623 1a.886.886 0 01.041 1.772V5.34c0 .114.035.239.095.343l3.516 5.647.002.003c.232.387.356.818.356 1.254 0 .4-.106.804-.318 1.17l-.003.006-.004.007-.095.158A2.36 2.36 0 0112.217 15h-8.4c-.44 0-.86-.118-1.22-.333a2.448 2.448 0 01-.875-.904l-.001-.003a2.428 2.428 0 01-.301-1.163c0-.438.123-.877.367-1.268l3.53-5.647a.695.695 0 00.094-.343V2.772A.885.885 0 015.452 1zM8.904 2.774H7.185V5.34c0 .457-.136.892-.365 1.27l-.001.001-3.522 5.657a.644.644 0 00-.103.343c0 .102.026.2.081.296l.003.005a.62.62 0 00.553.329h8.4c.12 0 .223-.031.316-.087a.675.675 0 00.238-.898L9.272 6.612a2.324 2.324 0 01-.368-1.273V2.774zm.606 6.633l1.553 2.49a.227.227 0 01.01.243.223.223 0 01-.206.122H5.195c-.122 0-.187-.075-.206-.122-.028-.056-.056-.15.01-.243l1.553-2.49H9.51z"
fill="currentColor"
></path>
</svg>
Properties
Prop | Type | Description | Default |
---|---|---|---|
glyph (Required) | 'ActivityFeed' , 'AddFile' , 'AllProducts' , 'Apps' , 'Array' , 'ArrowDown' , 'ArrowLeft' , 'ArrowRight' , 'ArrowUp' , 'Beaker' , 'Bell' , 'Biometric' , 'Boolean' , 'Building' , 'Bulb' , 'Calendar' , 'Camera' , 'Cap' , 'CaretDown' , 'CaretLeft' , 'CaretRight' , 'CaretUp' , 'ChartFilled' , 'Charts' , 'Checkmark' , 'CheckmarkWithCircle' , 'ChevronDown' ,, 'ChevronLeft' 'ChevronRight' ,'ChevronUp' , 'Clock' ,'ClockWithArrow' , 'Clone' , 'Cloud' , 'Code' , 'CodeBlock' ,'Colon' , 'Connect' ,'Copy' ,'CreditCard' , 'CurlyBraces' , 'Dashboard' , 'Database' , 'Diagram' , 'Diagram2' , 'Diagram3' , 'Disconnect' , 'Download' , 'Drag' , 'Edit' , 'Ellipsis' , 'Email' , 'Escalation' , 'Export' , 'Favorite' , 'Federation' , 'File' , 'Filter' ,'Folder' , 'FullScreenEnter' , 'FullScreenExit' , 'Guage' , 'GlobeAmericas' , 'GovernmentBuilding' , 'Hash' , 'Highlight' , 'Home' , 'HorizontalDrag' , 'Import' , 'ImportantWithCircle' , 'InfoWithCircle' , 'InternalEmployee' , 'InviteUser' , 'Key' , 'Laptop' , 'LightningBolt' , 'Link' , 'List' , 'Lock' , 'LogIn' , 'LogOut' , 'MagnifyingGlass' , 'Megaphone' , 'Menu' , 'Minus' , 'Mobile' , 'MultiDirectionArrow' , 'MultiLayers' , 'NavCollapse' , 'NavExpand' , 'NoFilter' , 'NotAllowed' , 'Note' , 'OpenNewTab' , 'Pause' , 'Person' , 'PersonGroup' , 'PersonWithLock' , 'Pin' , 'Play' , 'Plus' , 'PlusWithCircle' , 'Primary' , 'Project' , 'QuestionMarkWithCircle' , 'Read' , 'Recommended' , 'Redo' , 'Refresh' ,'Relationship' , 'ReplicaSet' ,'Resize' , 'Return' , 'Save' , 'SearchIndex' , 'Secondary' , 'Serverless' , 'Settings' , 'ShardedCluster' , 'Shell' , 'SMS' ,'SortAscending' , 'SortDescending' , 'SortHorizontal' , 'SortVertical' ,'Sparkle' , 'SplitHorizontal' , 'SplitVertical' , 'Stitch' , 'String' , 'Support' , 'Sweep' , 'Table' , 'Tag' , 'ThumbsDown' , 'ThumbsUp' , 'TimeSeries' , 'TimeSeriesCollection' , 'Trash' , 'Undo' , 'University' , 'Unlock' , 'Unsorted' , 'UpDownCarets' , 'Upload' , 'VerticalEllipsis' , 'Visibility' , 'VisibilityOff' , 'Warning' , 'Wizard' , 'Wrench' , 'Write' ,'X' , 'XWithCircle' | Specifies the glyph to use. | |
size | 'small' , 'default' , 'large' , 'xlarge' , number | The height and width of the glyph's viewBox. This can be any number or one of the following 'small' , 'default' , 'large' , 'xlarge' | 'default' |
fill | string | The fill color that is passed to the glyph. By default, the glyph will inherit its fill from the CSS color property of its nearest ancestor. | |
title | string , boolean , null | Renders a title tag with the passed string within the SVG element for screen reader accessibility. Setting this value to false will entirely unset the title. If title is undefined or null , a human-readable title will be generated based on the glyph's name. | |
... | SVGR.ComponentProps | All other props will be spread on the svg element |
createIconComponent
Usage (Registering custom icon sets)
This package exposes a method used to generate a custom version of the Icon component with any specified set of icons.
// Import the createIconComponent method from the Icon package
import { createGlyphComponent, createIconComponent } from '@leafygreen-ui/icon';
// Create your 'glyphs' object. For each key / value pair, the key will be the name of the icon,
// and the value can be any valid React component.
const myGlyphs = {
MyCustomGlyph: createGlyphComponent('MyCustomGlyph', props => (
<svg {...props} />
)),
};
// The createIconComponent function returns your custom Icon component.
const MyIconComponent = createIconComponent(myGlyphs);
// Your icon is now ready to use!
const SomeComponent = () => (
<div>
<MyIconComponent glyph="MyCustomGlyph" />
</div>
);
We also export the default icon set for you! If you want to include our glyphs with your custom glyphs, you can do something like this:
import { createGlyphComponent, createIconComponent } from '@leafygreen-ui/icon';
const myGlyphs = {
...glyphs,
MyCustomGlyph: createGlyphComponent('MyCustomGlyph', props => (
<svg {...props} />
)),
};
const MyIconComponent = createIconComponent(myGlyphs);
Note: Glyph has a static property, isGlyph
, that enables checking whether or not a component is a LeafyGreen glyph.
Returns
A custom Icon
component, that includes any custom glyph
s
Properties
Prop | Type | Description | Default |
---|---|---|---|
GlyphObject | Record<string, LGGlyph.Component> | A dictionary record of all the named icons in the icon set |
createGlyphComponent
Ensures a custom glyph accepts the same props and treat them the same as a built-in Leafygreen icon. To ensure a custom glyph behaves similarly to built-in icons, be sure to:
- Spread
props
onto thesvg
element - Ensure all fills in the
svg
are set tocurrentColor
- Strokes are converted to outlines (this should be done in Figma)
Usage
import { createGlyphComponent, Size } from '@leafygreen-ui/icon';
const MyIconGlyph = createGlyphComponent('myIconName', props => (
<svg {...props} />
));
return <MyIconGlyph size={Size.Large} role="presentation" />;
Returns
A LGGlyph.Component
Properties
Prop | Type | Description | Default |
---|---|---|---|
name | string | The name of the icon | |
Glyph | SVGR.Component | The React SVG component |
Reference
Creating a new icon component
(For DS engineers)
- After uploading a new SVG file to
src/glyphs
, replace allfill
property values for strokes with#000
. - Update
src/glyphs/index.ts
to import/export the SVG file. - Build the package with
yarn build:packages icon
to create the component insrc/generated
. - Update README
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
3 months ago
4 months ago
4 months ago
5 months ago
8 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
6 months ago
6 months ago
9 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago