Icon.stories.mdx

import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks' import { select } from '@storybook/addon-knobs' import { Icons } from './Icon.storiesHelpers' import Icon from './'

Icon

An Icon component renders SVG icons.

Reference

• Designer: Buzz
• Engineering: PL
• Usage: Everywhere

Props

Adapter

As of v2.18.0, the svg set is opt-in. This was done to reduce the compiled bundle size. To load the svg icons, add the appropriate adapter to your app.

It is recommended that the adapter be loaded somewhere within your main entry point (e.g. src/index.js).

// src/index.js
// For a lighter-weight svg set for embeddables
import '@helpscout/hsds-react/adapters/embed'
// For the complete svg set
import '@helpscout/hsds-react/adapters/app'

Note: This loads all the svg images, including Icon and Illo.

Loading / Unloading SVG

To manually load SVG sets without an adapter, you can use the load function from this component:

import { load } from '@helpscout/hsds-react/components/Icon'

const customSVGSet = { ... }

load(customSVGSet)

To unload, or reset, the SVG set, you can use the unload function:

import { unload } from '@helpscout/hsds-react/components/Icon'

unload()