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';

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.