Icon

stablev1.0.0

A helper function to programmatically generate SVG icons.

Overview

This function will return the SVGElement representation of an icon from our design system.

A cool icon will be inserted after this text!

Nice icons on the left, too.

Usage

Dependencies

To get the icon component working, include the dependencies in your project in the following order:

  1. npm
  2. Sass
  3. Javascript
"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"

@import 'design-system/src/scss/01-atoms/icon';

import icon from 'design-system/src/js/00-utilities/icon.js';

Basic code

Function call

The function returns a reference to a new, detached, SVGElement. 

const myNewIcon = icon( iconId, iconClasses, spriteUrl );
# Name Type Default Required Description
0 iconId string / Yes The string identifier for the icon we want to create.
1 iconClasses Array [] No All icons will bear the icon class. In addition we can specify more classes in this array.
2 spriteUrl String '/img/sprite.svg' No The url of the sprite.svg file.

Overview example :

const
  container1 = document.getElementById( 'icon-container1' ),
  container2 = document.getElementById( 'icon-container2' );

if( container1 ) {
  const iconRight = icon( 'icon-plus', ['icon--16', 'icon--right'] );
  container1.insertAdjacentElement( 'beforeend', iconRight );
}
if( container2 ) {
  const iconLeft = icon( 'icon-plus', ['icon--16', 'icon--left'] );
  container2.insertAdjacentElement( 'afterbegin', iconLeft );
}

Modifiers

Check the documentation for the icon atom.