0.12.2 • Published 4 years ago

react-bytesize-icons v0.12.2

Weekly downloads
110
License
MIT
Repository
github
Last release
4 years ago

Bytesize icons as React components.

All the icons were designed by Dan Klammer.
Find the original SVG icons here.

How to install?

npm install --save react-bytesize-icons

How to use?

Here's an example for using the <Twitter/> component. 

import React from 'react';
import ReactDOM from 'react-dom';

import { Twitter } from 'react-bytesize-icons';

ReactDOM.render(
  <Twitter width={50} height={50} color="#1da1f2" />,
  document.getElementById('root')
);

You can also import this as following.

import Twitter from 'react-bytesize-icons/Twitter';

You should follow the import method which suits your needs. For details check #9.

Components reference

Check out this guide on how to use the different styles/props listed in the table.

Component NameComponent MarkupPreviewOptional Props
Activity<Activity/>Activitywidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Alert<Alert/>Alertwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Archive<Archive/>Archivewidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Arrow Bottom<ArrowBottom/>Arrow Bottomwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Arrow Left<ArrowLeft/>Arrow Leftwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Arrow Right<ArrowRight/>Arrow Rightwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Arrow Top<ArrowTop/>Arrow Topwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Backwards<Backwards/>Backwardswidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Bag<Bag/>Bagwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Ban<Ban/>Banwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Bell<Bell/>Bellwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Book<Book/>Bookwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Bookmark<Bookmark/>Bookmarkwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Calendar<Calendar/>Calendarwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Camera<Camera/>Camerawidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Caret Bottom<CaretBottom/>Caret Bottomwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Caret Left<CaretLeft/>Caret Leftwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Caret Right<CaretRight/>Caret Rightwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Caret Top<CaretTop/>Caret Topwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Cart<Cart/>Cartwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Checkmark<Checkmark/>Checkmarkwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Chevron Bottom<ChevronBottom/>Chevron Bottomwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Chevron Left<ChevronLeft/>Chevron Leftwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Chevron Right<ChevronRight/>Chevron Rightwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Chevron Top<ChevronTop/>Chevron Topwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Clipboard<Clipboard/>Clipboardwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Clock<Clock/>Clockwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Close<Close/>Closewidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Code<Code/>Codewidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Compose<Compose/>Composewidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Creditcard<Creditcard/>Creditcardwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Desktop<Desktop/>Desktopwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Download<Download/>Downloadwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Edit<Edit/>Editwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Eject<Eject/>Ejectwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Ellipsis Horizontal<EllipsisHorizontal/>Ellipsis Horizontalwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Ellipsis Vertical<EllipsisVertical/>Ellipsis Verticalwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
End<End/>Endwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Export<Export/>Exportwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
External<External/>Externalwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Eye<Eye/>Eyewidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Feed<Feed/>Feedwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
File<File/>Filewidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Filter<Filter/>Filterwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Fire<Fire/>Firewidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Flag<Flag/>Flagwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Folder<Folder/>Folderwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Folder Open<FolderOpen/>Folder Openwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Forwards<Forwards/>Forwardswidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Fullscreen<Fullscreen/>Fullscreenwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
FullscreenExit<FullscreenExit/>FullscreenExitwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Gift<Gift/>Giftwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
GitHub<GitHub/>GitHubwidth=32, height=32, color='currentcolor', className='example-class' id='example-id'
Heart<Heart/>Heartwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Home<Home/>Homewidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Import<Import/>Importwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Inbox<Inbox/>Inboxwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Info<Info/>Infowidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Lightning<Lightning/>Lightningwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Link<Link/>Linkwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Location<Location/>Locationwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Lock<Lock/>Lockwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Mail<Mail/>Mailwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Menu<Menu/>Menuwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Message<Message/>Messagewidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Microphone<Microphone/>Microphonewidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Minus<Minus/>Minuswidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Mobile<Mobile/>Microphonewidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Moon<Moon/>Moonwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Move<Move/>Movewidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Music<Music/>Musicwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Mute<Mute/>Mutewidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Options<Options/>Optionswidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Paperclip<Paperclip/>Paperclipwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Pause<Pause/>Pausewidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Photo<Photo/>Photowidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Play<Play/>Playwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Plus<Plus/>Pluswidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Portfolio<Portfolio/>Portfoliowidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Print<Print/>Printwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Reload<Reload/>Reloadwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Reply<Reply/>Replywidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Search<Search/>Searchwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Send<Send/>Sendwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Settings<Settings/>Settingswidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
SignIn<SignIn/>SignInwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
SignOut<SignOut/>SignInwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Star<Star/>Starwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Start<Start/>Startwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Tag<Tag/>Tagwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Telephone<Telephone/>Telephonewidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Trash<Trash/>Trashwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Twitter<Twitter/>Twitterwidth=32, height=32, color='currentcolor', className='example-class' id='example-id'
Unlock<Unlock/>Unlockwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Upload<Upload/>Uploadwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
User<User/>Userwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Video<Video/>Videowidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Volume<Volume/>Volumewidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
Work<Work/>Workwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
ZoomIn<ZoomIn/>ZoomInwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
ZoomOut<ZoomOut/>ZoomOutwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'
ZoomReset<ZoomReset/>ZoomResetwidth=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor', className='example-class' id='example-id'

If you have any questions, then join our DevChat Slack group!

bytesizeiconsiconsuireactcomponents
@infinitebrahmanuniverse/nolb-react-by@everything-registry/sub-chunk-2543@zalastax/nolb-react-by
0.12.2

4 years ago

0.12.1

4 years ago

0.12.0

4 years ago

0.11.1

5 years ago

0.11.0

5 years ago

0.10.0

5 years ago

0.9.0

5 years ago

0.8.3

6 years ago

0.8.2

6 years ago

0.8.1

6 years ago

0.8.0

7 years ago

0.7.0

8 years ago

0.6.4

8 years ago

0.6.3

8 years ago

0.6.1

8 years ago

0.6.0

8 years ago

0.5.2

8 years ago

0.5.1

8 years ago

0.5.0

8 years ago