components

Icon (code)

Icons can be used to provide extra visual context for other items.

import { Add } from '@mediahuis/chameleon-theme-wl/icons'

import { Icon } from '@mediahuis/chameleon-react'

<Icon as={Add} color="green50" />

<Icon as={Add} color="green50" />

Props

default: undefined

Provide an svgr icon to the Icon component, please choose one of our pre-defined iconset.

import { Add, Brand, Shield } from '@mediahuis/chameleon-theme-wl/icons'

import { Icon } from '@mediahuis/chameleon-react'

<Icon as={Add} />
<Icon as={Brand} />
<Icon as={Shield} />

<Icon as={Add} />
<Icon as={Brand} />
<Icon as={Shield} />

default: undefined

Provide the icon component you want to use.

import { Add, Brand, Shield } from '@mediahuis/chameleon-theme-wl/icons'

import { Icon } from '@mediahuis/chameleon-react'

<Icon as={Add} />
<Icon as={Brand} />
<Icon as={Shield} />

<Icon as={Add} />
<Icon as={Brand} />
<Icon as={Shield} />

default: medium

All icons are available in sets of four different sizes, where the default size is Medium.

import { Brand } from '@mediahuis/chameleon-theme-wl/icons'

import { Icon } from '@mediahuis/chameleon-react'

<Icon as={Brand} size="small" />
<Icon as={Brand} size="medium" />
<Icon as={Brand} size="large" />
<Icon as={Brand} size="xLarge" />

<Icon as={Brand} size="small" />
<Icon as={Brand} size="medium" />
<Icon as={Brand} size="large" />
<Icon as={Brand} size="xLarge" />

Good for you! We also supply these icons as SVG files, you can find them in each theme package under lib/web/icons.