ChūshōIcon
Display a scalable SVG icon from a pre-existing sprite.
Usage
See using components for detailed instructions.
import { CIcon } from 'chusho';
Config
The options below are to be set in the global configuration at the following location:
{
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
class({ variant }) {
return ['icon', {
'icon--solid': variant?.solid,
'icon--outline': variant?.outline,
}]
}
API
| Name | Type | Default | Description |
|---|---|---|---|
| Props | |||
| variant | string|array|object | undefined | Useful when used in the component config |
| 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 | null | 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="sparkles" />
Custom Scale
<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.
<CBtn variant="secondary">
<CIcon id="thumb-up" alt="Like" />
</CBtn>