# Icon

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

# Config

# spriteUrl

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

  • type: string
  • default: null

# width

Icons viewBox width. This value will be multiplied by the scale prop to calculate the display size.

  • type: number
  • default: 24

# height

Icons viewBox width. This value will be multiplied by the scale prop to calculate the display size.

  • type: number
  • default: 24

# class

Classes applied to the component root element, except when the prop bare is set to true. See styling components.

  • type: Array<String | Object> | Object | String | (props: Object) => {}
  • default: null

# Example

class({ variant }) {
    return ['icon', {
        'icon--solid': variant?.includes('solid'),
        'icon--outline': variant?.includes('outline'),
    }]
}

# API

CIcon

Name Type Default Description
Props
variant  string|array null

Useful when used in the component config class option, to style it conditionally. See styling components.

bare  boolean false

Disable class inheritance from the component config. See styling components.

id * string

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

scale  number 1

Multiply the width/height defined in the config to change the icon display size.

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

# Simplest

<CIcon id="palette" />

# 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.

<CBtn>
  <CIcon id="picture" alt="View larger picture" />
</CBtn>
Last updated: 12/2/2020, 10:36:38 AM