# Icon

Display a scalable SVG icon from a pre-existing sprite.

<CIcon id="palette" />

# Config

# spriteUrl

  • type: string

Load the sprite from a remote URL. This technique doesn’t work on Internet Explorer, but it can be polyfilled with svgxuse. Learn more about SVG Sprites on CSS-Tricks.

# width

  • type: number
  • default: 24

# height

  • type: number
  • default: 24

Icon viewBox height.

# class

  • type: string

Class applied to all Icon instances.


Name Type Default Description
id * string

The id of the symbol (icon) to display from within the sprite.

scale  number 1

The scale relative to the dimensions defined in the config (icon.width, icon.height).

alt  string ''

Provides an alternate text to describe the icon meaning in the context its used. In cases where an icon would be used without any label close by, this is important to provide for accessibility.

Example: imagine a lonely trash icon within a button dedicated to delete an article, this prop should be set to a value like "Delete article".

# Examples

# Custom Scale

<CIcon id="picture" :scale="0.5" />

# With Alternate Text

When used to depict an interactive element without any label close-by, use the alternate text to describe the action.

  <CIcon id="picture" alt="View larger picture" />