React Icon Components

Use TREND svg icons for consistent visual and decorative cues.

• Installation
• Basic Usage
• Props
• Icons
• Building Icons

Installation

## Has peer dependency with react and react-dom
npm install react react-dom
npm install @trend/icon

Basic Usage

With a module bunlder like webpack, use as you would anything else:

// Using ES6 modules.
@import React from 'react';
@import withIcon from '@trend/icon';

const Menu = props => <svg viewBox="..." {...props}>...</svg>;

export default withIcon(Menu);

Import already wrapped icons:

// Using ES6 modules.
@import React from 'react';
@import Bell from '@trend/icon/Bell';

// Render a basic TREND component button.
function Alert() {
  return <Bell size={3} />;
}

// => <svg role="img" viewBox arialabelledBy style>...</svg>

Props

All props are passed through directly to the svg itself, with the exception of the width, height, and style props.

size

number||string | optional, defaults to 1

Adding a size will adjust the width and height attributes of the svg to preserve the 1:1 ratio required for the icon.

unit

string | optional, defaults to rem and can only be one of rem or em

Change the unit of measurment for the size of the icon.

style

object | optional, see default styles below, any additional styles

const defaultStyles = {
  display: 'inline-block',
  fill: 'currentColor',
  verticalAlign: 'middle'
};

Icons

All icons can be imported directly by file name or from main module import.

import { Bell } from '@trend/icon';
import Bell from '@trend/icon/bell';

Name | Display name --- | --- Add | WithIcon(Add) App | WithIcon(App) Bell | WithIcon(Bell) Calendar | WithIcon(Calendar) Camera | WithIcon(Camera) Check | WithIcon(Check) ChevronLeft | WithIcon(ChevronLeft) ChevronRight | WithIcon(ChevronRight) Close | WithIcon(Close) Cog | WithIcon(Cog) Comment | WithIcon(Comment) Crop | WithIcon(Crop) Data | WithIcon(Data) Edit | WithIcon(Edit) Ellipsis | WithIcon(Ellipsis) Exclamation | WithIcon(Exclamation) Filter | WithIcon(Filter) Location | WithIcon(Location) Lock | WithIcon(Lock) Menu | WithIcon(Menu) Message | WithIcon(Message) Move | WithIcon(Move) Mute | WithIcon(Mute) Pause | WithIcon(Pause) Play | WithIcon(Play) Print | WithIcon(Print) Profile | WithIcon(Profile) QuestionMark | WithIcon(QuestionMark) Search | WithIcon(Search) Share | WithIcon(Share) Sort | WithIcon(Sort) SoundOn | WithIcon(SoundOn) Stats | WithIcon(Stats) Tags | WithIcon(Tags) Trash | WithIcon(Trash) Unlock | WithIcon(Unlock) Users | WithIcon(Users) Video | WithIcon(Video) Weblink | WithIcon(Weblink) ZoomIn | WithIcon(ZoomIn) ZoomOut | WithIcon(ZoomOut)

Building Icons

All icons are generated using svgr. All raw svg files reside in the svgs directory and to re-compile the svgs into React components just run the npm run build:icons command. Running command will auto-generate the main index.js as well.