Icon

Render single color SVG icons

The Toolkit plugin has a small set of icons available for usage

Feather Icons

Usage

/MyElement.js

import React from 'react';
import { useHookComponent } from 'reactium-core/sdk';

 const MyElement = () => {
   const { Icon, Element } = useHookComponent('RTK'); 
   
   return (
     <Element title='My Element'>
       <Icon name='Feather.AlertCircle' />
     </Element>
   );
 }; 

Properties

Property	Type	Description
name	String	The icon name
size	Number	The size of the icon. Default: 24

Any additional props are passed to the SVG element.

Icons

[
  "Feather.AlertCircle",
  "Feather.AlertOctagon",
  "Feather.AlertTriangle",
  "Feather.ArrowDown",
  "Feather.ArrowDownCircle",
  "Feather.ArrowDownLeft",
  "Feather.ArrowDownRight",
  "Feather.ArrowLeft",
  "Feather.ArrowLeftCircle",
  "Feather.ArrowRight",
  "Feather.ArrowRightCircle",
  "Feather.ArrowUp",
  "Feather.ArrowUpCircle",
  "Feather.ArrowUpLeft",
  "Feather.ArrowUpRight",
  "Feather.Box",
  "Feather.Check",
  "Feather.ChevronDown",
  "Feather.ChevronLeft",
  "Feather.ChevronRight",
  "Feather.ChevronUp",
  "Feather.Clipboard",
  "Feather.Code",
  "Feather.Copy",
  "Feather.Cpu",
  "Feather.ExternalLink",
  "Feather.Feather",
  "Feather.File",
  "Feather.Filter",
  "Feather.Folder",
  "Feather.Heart",
  "Feather.HelpCircle",
  "Feather.Info",
  "Feather.Layout",
  "Feather.List",
  "Feather.Maximize",
  "Feather.Menu",
  "Feather.Minimize",
  "Feather.Minus",
  "Feather.MinusCircle",
  "Feather.MinusSquare",
  "Feather.Monitor",
  "Feather.MoreHorizontal",
  "Feather.MoreVertical",
  "Feather.Package",
  "Feather.Plus",
  "Feather.PlusCircle",
  "Feather.PlusSquare",
  "Feather.RefreshCw",
  "Feather.Settings",
  "Feather.Sidebar",
  "Feather.Sliders",
  "Feather.Tag",
  "Feather.X",
  "Feather.XCircle",
  "Feather.XOctagon",
  "Feather.XSquare"
]