Icons

The e-icon component provides an easy way to display icons in your application using webfont or simply passing the svg code directly

view on GitHub

Icon svg

You can use svg as an icon by simply passing an object of type IconPath to the icon property of the component.

svg exanple

path attribute example

import { IconPath } from "drocket"; const iconSend: IconPath = { title: "send", d: "M2,21L23,12L2,3V10L17,12L2,14V21Z", };

Web font

The component supports the use of any web font, for example if you want to use Font Awesome, you simply modify the sass variables file as shown below. It is important to note that you will still need to install the font following the steps in the documentation.

variables.scss

$icon-class: "fas"; $icon-prefix: "fa-";

Buttons

Icons can be used inside of buttons

API Reference

Props

Explore the available props for the form component

Property	Description	Type	Default
color	Applies specified color to the component - supports only utility colors (for example `primary` or `secondary`)	string	undefined
small	applies the size configured in the sass variables for the `small` value	boolean	false
x-small	applies the size configured in the sass variables for the `x-small` value	boolean	false
x-large	applies the size configured in the sass variables for the `x-large` value	boolean	false
icon	object with the icon configuration or class name that corresponds to the font that has been imported into the project	Array<IconPath> IconPath string	undefined

SASS Variables

Name	Default
$icon-font-sizes	( "x-small": 18px, "small": 20px, "default": 24px, "large": 28px, "x-large": 32px, );

data types

You can import all data types used in the component from the path: ~/drocket/icon/types

export type IconPath { d: string, fill?: string, class?: string }