Skip to content
On this page

Icon

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

Usage

See using components for detailed instructions.

js
import { CIcon } from 'chusho';

Config

The options below are to be set in the global configuration at the following location:

js
{
  components: {
    icon: {
      spriteUrl: '',
      width: 24,
      height: 24,
      class: ({ id, scale, spriteUrl, width, height, alt, variant }) => {},
    },
  },
}

spriteUrl

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.

  • 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

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

API

NameTypeDefaultDescription
Props
variant string|array|objectundefined

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

bare booleanfalse

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

id *string

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

scale number1

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

alt stringnull

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

template
<CIcon id="sparkles" />

Custom Scale

template
<CIcon id="cloud" :scale="2" />

With Alternate Text

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

template
<CBtn variant="secondary">
  <CIcon id="thumb-up" alt="Like" />
</CBtn>

Released under the MIT License.