#Import

import { Icon } from '@dnb/eufemia'

#Description

The main Icon component is a wrapper for whatever icon you place within it. This means a span wrapping an inline SVG.

You can use whatever you like inside this Icon component.

#Why use it?

You will get several advantages on using it, like:

• Responsiveness in terms of font-size
• Coloring
• Accessibility

#Importing Icons

In case your environment doesn't support tree-shaking, import the icons explicitly.

// Named ES import
import { bell } from '@dnb/eufemia/icons'

// or named import with modifier
import { bell as Bell } from '@dnb/eufemia/icons'

// Default and explicit ES import
import Bell from '@dnb/eufemia/icons/bell'

#Icon Sizes

Exists in the Icon Library

• default 1rem (16px)
• medium 1.5rem (24px)

Additional Sizes

• small 0.75rem (12px)
• large 2rem (32px)
• custom-size will not be responsive. Width and Height is set as pixels

#Custom project Icons

For decorative or functional icons (not illustrations) use SVG as it gives the user responsiveness and better accessibility. But it gives you also more control, so you can change the color and size inherited by the parent HTML element.

To optimize your SVG icons to be used with Eufemia, you can follow these steps or get at least, inspired:

1. Make sure your SVG icon fits in the two sizes (default of 16px and medium of 24px) with the correct stroke thickness of 1.5px.
2. Copy the SVG markup (in Figma, right click -> Copy as -> Copy as SVG).
3. Declutter and remove ID attributes in the markup, so they don't appear twice in your web application DOM. In most cases, you don't need <defs ... /> and the corresponding ids anyway.
4. Optimize the SVG. Use e.g. Online SVGOMG by using Paste markup.
5. NB: Do not remove viewBox! The viewBox will together with some CSS ensure that the icon scales based on the root font-size.
6. Copy again the optimized markup and paste it into your JSX component (inline) og SVG file.
7. Consume the custom icons with either dynamic imports (import(...)) if you have many icons, or use static imports, like so:

#If you have an SVG loader

import ImportedSVGIcon from 'my-icons/custom_icon.svg'

render(<Icon icon={ImportedSVGIcon} />)

#Inline the SVG in your JSX

function CustomSVGIcon(props) {
  return <svg {...props}>...</svg>
}

render(<Button icon={CustomSVGIcon} />)

#SVG import in Create React App

import { ReactComponent as CustomIcon } from './custom_icon.svg'

render(<Icon size="medium">{CustomIcon}</Icon>)

#Primary Icon

There is also the IconPrimary component, which comes with all the Primary Icons included in the @dnb/eufemia. you don't have to import the primary icons.

#Demos

#Default and Medium-sized icons (Responsive)

<Icon icon={Bell} title="Give Icons a Title, or ..." />
<Icon icon={BellMedium} aria-hidden />
<Bell title="I'm not responsive!" />
{/* <- Not responsive! */}

#Icons with border. NB: Use it with caution. It should not be used where it can confuse users with being a clickable button.

<P>
  <Icon border={true} icon={Bell} right />
  <Icon border={true} icon={BellMedium} size="medium" right />
  <IconPrimary border={true} icon="information" right />
  <IconPrimary border={true} icon="information" size="medium" right />
  <Button icon={<IconPrimary icon="add" border />} text="Button" />
</P>

#Responsive to its inherited font-size

<h1 className="dnb-h--xx-large">
  h1 with auto sized <Icon icon={BellMedium} size="auto" aria-hidden />{' '}
  icon
</h1>

#Icon color variations

All of these methods will output the same color

<Icon
  icon={BellMedium}
  color="var(--color-fire-red)"
  title="CSS variable"
/>
<Icon icon={BellMedium} color="#DC2A2A" title="Hex" />
<Icon icon={BellMedium} color="rgb(220,42,42)" title="RGB" />