React Icon Components
Use TREND svg icons for consistent visual and decorative cues.
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) |
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.