react-bytesize-icons - npm Package Compare versions

Comparing version 0.6.4 to 0.7.0

package.json

 {
   "name": "react-bytesize-icons",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "description": "Bytesize Icons as React Components.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

 ##Bytesize icons as React components.  
-The SVG icons came from: https://github.com/danklammer/bytesize-icons  
+All the icons were designed by [Dan Klammer](https://github.com/danklammer).  
+Find the origninal [SVG icons here](https://github.com/danklammer/bytesize-icons).  
 
+
+### How to install?
+
 `npm install --save react-bytesize-icons`  
 
-More icons and how-to guide will be coming tomorrow. Good night 🌙  
+### How to use?
+Here's an example for using the `<Twitter/>` component.  
+
+```javascript
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Twitter } from 'react-bytesize-icons';
+
+
+ReactDOM.render(
+  <Compose width={50} height={50} color="#1da1f2" />,
+  document.getElementById('root')
+);
+```
+
+
+### Components reference
+
+Component Name  | Component Markup  | Preview | Optional Props
+--- | --- | --- | ---
+Activity  | `<Activity/>` | ![Activity](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/activity.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Alert | `<Alert/>`  | ![Alert](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/alert.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Archive | `<Archive/>`  | ![Archive](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/archive.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Arrow Bottom  | `<ArrowBottom/>`  | ![Arrow Bottom](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/arrow-bottom.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Arrow Left  | `<ArrowLeft/>`  | ![Arrow Left](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/arrow-left.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Arrow Right | `<ArrowRight/>` | ![Arrow Right](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/arrow-right.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Arrow Top | `<ArrowTop/>` | ![Arrow Top](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/arrow-top.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Backwards | `<Backwards/>`  | ![Backwards](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/backwards.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Ban | `<Ban/>`  | ![Ban](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/ban.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Bell  | `<Bell/>` | ![Bell](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/bell.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Bookmark  | `<Bookmark/>` | ![Bookmark](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/bookmark.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Camera  | `<Camera/>` | ![Camera](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/camera.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Caret Bottom  | `<CaretBottom/>`  | ![Caret Bottom](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/caret-bottom.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Caret Left  | `<CaretLeft/>`  | ![Caret Left](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/caret-left.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Caret Right | `<CaretRight/>` | ![Caret Right](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/caret-right.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Caret Top | `<CaretTop/>` | ![Caret Top](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/caret-top.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Cart  | `<Cart/>` | ![Cart](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/cart.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Checkmark | `<Checkmark/>`  | ![Checkmark](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/checkmark.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Chevron Bottom  | `<ChevronBottom/>`  | ![Chevron Bottom](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/chevron-bottom.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Chevron Left  | `<ChevronLeft/>`  | ![Chevron Left](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/chevron-left.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Chevron Right | `<ChevronRight/>` | ![Chevron Right](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/chevron-right.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Chevron Top | `<ChevronTop/>` | ![Chevron Top](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/chevron-top.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Clock | `<Clock/>`  | ![Clock](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/clock.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Close | `<Close/>`  | ![Close](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/close.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Code  | `<Code/>` | ![Code](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/code.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Compose | `<Compose/>`  | ![Compose](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/compose.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Creditcard  | `<Creditcard/>` | ![Creditcard](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/creditcard.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Download  | `<Download/>` | ![Download](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/download.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Edit  | `<Edit/>` | ![Edit](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/edit.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Eject | `<Eject/>`  | ![Eject](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/eject.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Ellipsis Horizontal | `<EllipsisHorizontal/>` | ![Ellipsis Horizontal](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/ellipsis-horizontal.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Ellipsis Vertical | `<EllipsisVertical/>` | ![Ellipsis Vertical](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/ellipsis-vertical.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+End | `<End/>`  | ![End](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/end.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Export  | `<Export/>` | ![Export](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/export.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+External  | `<External/>` | ![External](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/external.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Eye | `<Eye/>`  | ![Eye](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/eye.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+File  | `<File/>` | ![File](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/file.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Fire  | `<Fire/>` | ![Fire](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/fire.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Flag  | `<Flag/>` | ![Flag](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/flag.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Folder Open | `<FolderOpen/>` | ![Folder Open](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/folder-open.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Folder  | `<Folder/>` | ![Folder](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/folder.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Forwards  | `<Forwards/>` | ![Forwards](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/forwards.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Gift  | `<Gift/>` | ![Gift](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/gift.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Github  | `<Github/>` | ![Github](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/github.svg)   | `width=32, height=32, color='currentcolor'`
+Heart | `<Heart/>`  | ![Heart](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/heart.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Home  | `<Home/>` | ![Home](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/home.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Import  | `<Import/>` | ![Import](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/import.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Inbox | `<Inbox/>`  | ![Inbox](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/inbox.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Info  | `<Info/>` | ![Info](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/info.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Lightning | `<Lightning/>`  | ![Lightning](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/lightning.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Link  | `<Link/>` | ![Link](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/link.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Location  | `<Location/>` | ![Location](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/location.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Lock  | `<Lock/>` | ![Lock](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/lock.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Mail  | `<Mail/>` | ![Mail](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/mail.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Menu  | `<Menu/>` | ![Menu](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/menu.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Message | `<Message/>`  | ![Message](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/message.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Music | `<Music/>`  | ![Music](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/music.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Mute  | `<Mute/>` | ![Mute](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/mute.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Options | `<Options/>`  | ![Options](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/options.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Paperclip | `<Paperclip/>`  | ![Paperclip](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/paperclip.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Pause | `<Pause/>`  | ![Pause](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/pause.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Photo | `<Photo/>`  | ![Photo](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/photo.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Play  | `<Play/>` | ![Play](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/play.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Portfolio | `<Portfolio/>`  | ![Portfolio](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/portfolio.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Reload  | `<Reload/>` | ![Reload](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/reload.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Reply | `<Reply/>`  | ![Reply](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/reply.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Search  | `<Search/>` | ![Search](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/search.svg)  | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Settings  | `<Settings/>` | ![Settings](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/settings.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Star  | `<Star/>` | ![Star](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/star.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Start | `<Start/>`  | ![Start](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/start.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Tag | `<Tag/>`  | ![Tag](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/tag.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Trash | `<Trash/>`  | ![Trash](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/trash.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Twitter | `<Twitter/>`  | ![Twitter](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/twitter.svg)   | `width=32, height=32, color='currentcolor'`
+Unlock  | `<Unlock/>` | ![Unlock](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/unlock.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Upload  | `<Upload/>` | ![Upload](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/upload.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+User  | `<User/>` | ![User](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/user.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Video | `<Video/>`  | ![Video](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/video.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Volume  | `<Volume/>` | ![Volume](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/volume.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+Work  | `<Work/>` | ![Work](https://cdn.rawgit.com/abdelhai/react-bytesize-icons/master/icons/work.svg)   | `width=32, height=32, strokeWidth='6.25%', strokeLinejoin='round', strokeLinecap='round', color='currentcolor'`
+
+### If you have any questions, then join our [DevChat Slack group!](https://devchat.devolio.net/)  

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

112081

increased by20.03%

Number of lines in readme file

112

increased by1766.67%

No dependency changes