Icon

!npm (scoped)

#### View on MongoDB.design

Installation

$3

``shell
pnpm add @leafygreen-ui/icon
`

$3

`shell
yarn add @leafygreen-ui/icon
`

$3

`shell
npm install @leafygreen-ui/icon
`

Example

`js
import Icon from '@leafygreen-ui/icon';
import PlusIcon from '@leafygreen-ui/icon/dist/Plus';

const SomeComponent = () => ;
const OneImport = () => ;
`

Properties

| Prop | Type | Description | Default |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| glyph (Required) | "ActivityFeed", "AddFile", "AllProducts", "AnalyticsNode", "Apps", "Array", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowUp", "Award", "Beaker", "Bell", "Biometric", "Boolean", "Building", "Bulb", "Calendar", "Camera", "Cap", "CaretDown", "CaretLeft", "CaretRight", "CaretUp", "ChartFilled", "Charts", "Checkmark", "CheckmarkWithCircle", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronUp", "Circle", "Clock", "ClockWithArrow", "Clone", "Cloud", "Code", "CodeBlock", "Coin", "Colon", "Config", "Connect", "Copy", "CreditCard", "CurlyBraces", "Cursor", "Dashboard", "Database", "Diagram", "Diagram2", "Diagram3", "Disconnect", "Download", "Drag", "Edit", "Ellipsis", "Email", "EmptyDatabase", "EmptyFolder", "Eraser", "Escalation", "Export", "Favorite", "Federation", "File", "Filter", "Folder", "Format", "FullScreenEnter", "FullScreenExit", "Function", "Gauge", "GlobeAmericas", "GovernmentBuilding", "Guide", "Hash", "HiddenSecondaryNode", "Highlight", "Home", "HorizontalDrag", "Import", "ImportantWithCircle", "InfoWithCircle", "InternalEmployee", "InviteUser", "Key", "Laptop", "LightningBolt", "Link", "List", "Lock", "LogIn", "LogOut", "MagnifyingGlass", "Megaphone", "Menu", "Minus", "Mobile", "Moon", "MultiDirectionArrow", "MultiLayers", "NavCollapse", "NavExpand", "NoFilter", "NotAllowed", "Note", "NumberedList", "OpenNewTab", "OutlineFavorite", "Package", "Pause", "Pending", "Person", "PersonGroup", "PersonWithLock", "Pin", "Play", "Plus", "PlusWithCircle", "Primary", "Project", "QuestionMarkWithCircle", "Read", "Recommended", "Redo", "Refresh", "Relationship", "ReplicaSet", "Resize", "Resource", "Return", "Revert", "Router", "SMS", "Save", "SearchIndex", "Secondary", "Serverless", "Settings", "ShardedCluster", "Shell", "Shield", "Shirt", "SortAscending", "SortDescending", "Sparkle", "SplitHorizontal", "SplitVertical", "Stitch", "Stop", "String", "Sun", "Support", "Sweep", "Table", "Tag", "TemporaryTable", "ThumbsDown", "ThumbsUp", "TimeSeries", "TimeSeriesCollection", "Trash", "Undo", "University", "Unlock", "Unsorted", "UpDownCarets", "Upload", "VerticalEllipsis", "View", "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.

`js
// 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 => (

)),
};

// The createIconComponent function returns your custom Icon component.
const MyIconComponent = createIconComponent(myGlyphs);

// Your icon is now ready to use!
const SomeComponent = () => (



);
`

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:

`js
import { createGlyphComponent, createIconComponent } from '@leafygreen-ui/icon';

const myGlyphs = {
...glyphs,
MyCustomGlyph: createGlyphComponent('MyCustomGlyph', 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 glyphs

Properties

| Prop | Type | Description | Default |
| ------------- | ----------------------------------- | ---------------------------------------------------------- | ------- |
| GlyphObject | Record | 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 the svg element
- Ensure all fills in the svg are set to currentColor
- Strokes are converted to outlines (this should be done in Figma)

Usage

`js
import { createGlyphComponent, Size } from '@leafygreen-ui/icon';

const MyIconGlyph = createGlyphComponent('myIconName', props => (

));

return ;
`

Returns

A LGGlyph.Component

Properties

| Prop | Type | Description | Default |
| ------- | ---------------- | ----------------------- | ------- |
| name | string | The name of the icon | |
| Glyph | SVGR.Component | The React SVG component | |

Reference

$3

(For DS engineers)

- After uploading a new SVG file to src/glyphs, replace all fill property values for strokes with #000.
- Update src/glyphs/index.ts to import/export the SVG file.
- Build the package with pnpm run build to create the component in src/generated`.
- Update README