From c27ba80102adddaf1d34e162e2c43ab45fe473bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ian=20Miller=20=F0=9F=A6=90?= Date: Sat, 16 Oct 2021 01:28:04 -0400 Subject: [PATCH] change class components to functional --- README.md | 13 +- package.json | 2 +- src/IconInner.js | 40 ++-- src/icons.json | 550 ++++++++++++++++++++++++----------------------- src/index.js | 57 ++--- 5 files changed, 335 insertions(+), 327 deletions(-) diff --git a/README.md b/README.md index a81b500..2dc8cbd 100644 --- a/README.md +++ b/README.md @@ -79,12 +79,13 @@ To build the bundled assets for consumption `yarn build` ### Updating the icons -If you found a missing icon, it is pretty easy to generate a new icons.json and get a PR up so this package stays in sync with the latest feather icons. -1. git clone https://github.com/feathericons/feather.git -2. npx install -3. npx babel-node bin/build-icons-json.js -4. cp dist/icons.json ../feather-icons-react/src/icons.json -5. Format the file, try to avoid entire green so the diff looks neat in the PR +If you found a missing icon, it is pretty easy to generate a new icons.json and get a PR up so this package stays in sync with the latest feather icons. +Go into your desired project directory (ideally one directory above where you have feather-icons-react saved) +1. `git clone https://github.com/feathericons/feather.git` +2. `cd feather && npx install` +3. `npx babel-node bin/build-icons-json.js` +4. `cp dist/icons.json ../feather-icons-react/src/icons.json` +5. Now open the file you just copied. Format the file, try to avoid entire green so the diff looks neat in the PR. Alternatively, you can simply copy just the lines from the JSON file you know are missing. This is easier if you're just adding one new icon. diff --git a/package.json b/package.json index 70f37fb..ae5131b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "feather-icons-react", - "version": "0.4.3", + "version": "0.5.0", "description": "Feather Icons as a React component.", "main": "build/index.js", "scripts": { diff --git a/src/IconInner.js b/src/IconInner.js index 96962fe..4867595 100644 --- a/src/IconInner.js +++ b/src/IconInner.js @@ -1,36 +1,26 @@ -import React, { PureComponent } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; // for now this icons json is generated via the build script from latest feather // TODO: automatically generate this JSON via this repo's build script import icons from './icons.json'; -class IconInner extends PureComponent { - createMarkup(markup) { - // we dont sanitize markup - // since icons.json is maintained within the package before build - // do the weird thing for dangerouslySetInnerHTML - return { __html: markup }; - } +const createMarkup = (markup) => { + // we dont sanitize markup + // since icons.json is maintained within the package before build + return { __html: markup }; +}; - render() { - // is just a wrapper it does nothing except let me use valid JSX markup - // icons are based on generated icons.json from feather lib - const { icon } = this.props; - const iconMarkup = icons[icon]; +const IconInner = ({ icon }) => { + // icons are based on generated icons.json from feather lib + const iconMarkup = icons[icon]; - if (iconMarkup) { - // i didnt want to use dangerouslySetInnerHTML - // but this way I can just use the JSON to spit out SVG. - // another possible option is to use the feather lib functions - // which create the SVG files, then an SVG loader could be used. - // i am open to this for a future version. - return ( - - ); - } - return null; + if (iconMarkup) { + // i didnt want to use dangerouslySetInnerHTML + // but this way I can just use the JSON to spit out SVG. + return ; } -} + return null; +}; IconInner.propTypes = { icon: PropTypes.string.isRequired diff --git a/src/icons.json b/src/icons.json index 42c49f5..de05766 100644 --- a/src/icons.json +++ b/src/icons.json @@ -1,272 +1,288 @@ { - "activity": "<\/polyline>", - "airplay": "<\/path><\/polygon>", - "alert-circle": "<\/circle><\/line><\/line>", - "alert-octagon": "<\/polygon><\/line><\/line>", - "alert-triangle": "<\/path><\/line><\/line>", - "align-center": "<\/line><\/line><\/line><\/line>", - "align-justify": "<\/line><\/line><\/line><\/line>", - "align-left": "<\/line><\/line><\/line><\/line>", - "align-right": "<\/line><\/line><\/line><\/line>", - "anchor": "<\/circle><\/line><\/path>", - "aperture": "<\/circle><\/line><\/line><\/line><\/line><\/line><\/line>", - "archive": "<\/polyline><\/rect><\/line>", - "arrow-down-circle": "<\/circle><\/polyline><\/line>", - "arrow-down-left": "<\/line><\/polyline>", - "arrow-down-right": "<\/line><\/polyline>", - "arrow-down": "<\/line><\/polyline>", - "arrow-left-circle": "<\/circle><\/polyline><\/line>", - "arrow-left": "<\/line><\/polyline>", - "arrow-right-circle": "<\/circle><\/polyline><\/line>", - "arrow-right": "<\/line><\/polyline>", - "arrow-up-circle": "<\/circle><\/polyline><\/line>", - "arrow-up-left": "<\/line><\/polyline>", - "arrow-up-right": "<\/line><\/polyline>", - "arrow-up": "<\/line><\/polyline>", - "at-sign": "<\/circle><\/path>", - "award": "<\/circle><\/polyline>", - "bar-chart-2": "<\/line><\/line><\/line>", - "bar-chart": "<\/line><\/line><\/line>", - "battery-charging": "<\/path><\/line><\/polyline>", - "battery": "<\/rect><\/line>", - "bell-off": "<\/path><\/line>", - "bell": "<\/path>", - "bluetooth": "<\/polyline>", - "bold": "<\/path><\/path>", - "book-open": "<\/path><\/path>", - "book": "<\/path><\/path>", - "bookmark": "<\/path>", - "box": "<\/path><\/polyline><\/line>", - "briefcase": "<\/rect><\/path>", - "calendar": "<\/rect><\/line><\/line><\/line>", - "camera-off": "<\/line><\/path>", - "camera": "<\/path><\/circle>", - "cast": "<\/path><\/line>", - "check-circle": "<\/path><\/polyline>", - "check-square": "<\/polyline><\/path>", - "check": "<\/polyline>", - "chevron-down": "<\/polyline>", - "chevron-left": "<\/polyline>", - "chevron-right": "<\/polyline>", - "chevron-up": "<\/polyline>", - "chevrons-down": "<\/polyline><\/polyline>", - "chevrons-left": "<\/polyline><\/polyline>", - "chevrons-right": "<\/polyline><\/polyline>", - "chevrons-up": "<\/polyline><\/polyline>", - "chrome": "<\/circle><\/circle><\/line><\/line><\/line>", - "circle": "<\/circle>", - "clipboard": "<\/path><\/rect>", - "clock": "<\/circle><\/polyline>", - "cloud-drizzle": "<\/line><\/line><\/line><\/line><\/line><\/line><\/path>", - "cloud-lightning": "<\/path><\/polyline>", - "cloud-off": "<\/path><\/line>", - "cloud-rain": "<\/line><\/line><\/line><\/path>", - "cloud-snow": "<\/path><\/line><\/line><\/line><\/line><\/line><\/line>", - "cloud": "<\/path>", - "code": "<\/polyline><\/polyline>", - "codepen": "<\/polygon><\/line><\/polyline><\/polyline><\/line>", - "command": "<\/path>", - "compass": "<\/circle><\/polygon>", - "copy": "<\/rect><\/path>", - "corner-down-left": "<\/polyline><\/path>", - "corner-down-right": "<\/polyline><\/path>", - "corner-left-down": "<\/polyline><\/path>", - "corner-left-up": "<\/polyline><\/path>", - "corner-right-down": "<\/polyline><\/path>", - "corner-right-up": "<\/polyline><\/path>", - "corner-up-left": "<\/polyline><\/path>", - "corner-up-right": "<\/polyline><\/path>", - "cpu": "<\/rect><\/rect><\/line><\/line><\/line><\/line><\/line><\/line><\/line><\/line>", - "credit-card": "<\/rect><\/line>", - "crop": "<\/path><\/path>", - "crosshair": "<\/circle><\/line><\/line><\/line><\/line>", - "database": "<\/ellipse><\/path><\/path>", - "delete": "<\/path><\/line><\/line>", - "disc": "<\/circle><\/circle>", - "dollar-sign": "<\/line><\/path>", - "download-cloud": "<\/polyline><\/line><\/path>", - "download": "<\/path><\/polyline><\/line>", - "droplet": "<\/path>", - "edit-2": "<\/polygon>", - "edit-3": "<\/polygon><\/line>", - "edit": "<\/path><\/polygon>", - "external-link": "<\/path><\/polyline><\/line>", - "eye-off": "<\/path><\/line>", - "eye": "<\/path><\/circle>", - "facebook": "<\/path>", - "fast-forward": "<\/polygon><\/polygon>", - "feather": "<\/path><\/line><\/line>", - "file-minus": "<\/path><\/polyline><\/line>", - "file-plus": "<\/path><\/polyline><\/line><\/line>", - "file-text": "<\/path><\/polyline><\/line><\/line><\/polyline>", - "file": "<\/path><\/polyline>", - "film": "<\/rect><\/line><\/line><\/line><\/line><\/line><\/line><\/line>", - "filter": "<\/polygon>", - "flag": "<\/path><\/line>", - "folder-minus": "<\/path><\/line>", - "folder-plus": "<\/path><\/line><\/line>", - "folder": "<\/path>", + "activity": "", + "airplay": "", + "alert-circle": "", + "alert-octagon": "", + "alert-triangle": "", + "align-center": "", + "align-justify": "", + "align-left": "", + "align-right": "", + "anchor": "", + "aperture": "", + "archive": "", + "arrow-down-circle": "", + "arrow-down-left": "", + "arrow-down-right": "", + "arrow-down": "", + "arrow-left-circle": "", + "arrow-left": "", + "arrow-right-circle": "", + "arrow-right": "", + "arrow-up-circle": "", + "arrow-up-left": "", + "arrow-up-right": "", + "arrow-up": "", + "at-sign": "", + "award": "", + "bar-chart-2": "", + "bar-chart": "", + "battery-charging": "", + "battery": "", + "bell-off": "", + "bell": "", + "bluetooth": "", + "bold": "", + "book-open": "", + "book": "", + "bookmark": "", + "box": "", + "briefcase": "", + "calendar": "", + "camera-off": "", + "camera": "", + "cast": "", + "check-circle": "", + "check-square": "", + "check": "", + "chevron-down": "", + "chevron-left": "", + "chevron-right": "", + "chevron-up": "", + "chevrons-down": "", + "chevrons-left": "", + "chevrons-right": "", + "chevrons-up": "", + "chrome": "", + "circle": "", + "clipboard": "", + "clock": "", + "cloud-drizzle": "", + "cloud-lightning": "", + "cloud-off": "", + "cloud-rain": "", + "cloud-snow": "", + "cloud": "", + "code": "", + "codepen": "", + "codesandbox": "", + "coffee": "", + "columns": "", + "command": "", + "compass": "", + "copy": "", + "corner-down-left": "", + "corner-down-right": "", + "corner-left-down": "", + "corner-left-up": "", + "corner-right-down": "", + "corner-right-up": "", + "corner-up-left": "", + "corner-up-right": "", + "cpu": "", + "credit-card": "", + "crop": "", + "crosshair": "", + "database": "", + "delete": "", + "disc": "", + "divide-circle": "", + "divide-square": "", + "divide": "", + "dollar-sign": "", + "download-cloud": "", + "download": "", + "dribbble": "", + "droplet": "", + "edit-2": "", + "edit-3": "", + "edit": "", + "external-link": "", + "eye-off": "", + "eye": "", + "facebook": "", + "fast-forward": "", + "feather": "", + "figma": "", + "file-minus": "", + "file-plus": "", + "file-text": "", + "file": "", + "film": "", + "filter": "", + "flag": "", + "folder-minus": "", + "folder-plus": "", + "folder": "", + "framer": "", "frown": "", - "gift": "<\/polyline><\/rect><\/line><\/path><\/path>", - "git-branch": "<\/line><\/circle><\/circle><\/path>", - "git-commit": "<\/circle><\/line><\/line>", - "git-merge": "<\/circle><\/circle><\/path>", - "git-pull-request": "<\/circle><\/circle><\/path><\/line>", - "github": "<\/path>", - "gitlab": "<\/path>", - "globe": "<\/circle><\/line><\/path>", - "grid": "<\/rect><\/rect><\/rect><\/rect>", - "hard-drive": "<\/line><\/path><\/line><\/line>", - "hash": "<\/line><\/line><\/line><\/line>", - "headphones": "<\/path><\/path>", - "heart": "<\/path>", - "help-circle": "<\/circle><\/path><\/line>", - "home": "<\/path><\/polyline>", - "image": "<\/rect><\/circle><\/polyline>", - "inbox": "<\/polyline><\/path>", - "info": "<\/circle><\/line><\/line>", - "instagram": "<\/rect><\/path><\/line>", - "italic": "<\/line><\/line><\/line>", - "layers": "<\/polygon><\/polyline><\/polyline>", - "layout": "<\/rect><\/line><\/line>", - "life-buoy": "<\/circle><\/circle><\/line><\/line><\/line><\/line><\/line>", - "link-2": "<\/path><\/line>", - "link": "<\/path><\/path>", - "linkedin": "<\/path><\/rect><\/circle>", - "list": "<\/line><\/line><\/line><\/line><\/line><\/line>", - "loader": "<\/line><\/line><\/line><\/line><\/line><\/line><\/line><\/line>", - "lock": "<\/rect><\/path>", - "log-in": "<\/path><\/polyline><\/line>", - "log-out": "<\/path><\/polyline><\/line>", - "mail": "<\/path><\/polyline>", - "map-pin": "<\/path><\/circle>", - "map": "<\/polygon><\/line><\/line>", - "maximize-2": "<\/polyline><\/polyline><\/line><\/line>", - "maximize": "<\/path>", + "gift": "", + "git-branch": "", + "git-commit": "", + "git-merge": "", + "git-pull-request": "", + "github": "", + "gitlab": "", + "globe": "", + "grid": "", + "hard-drive": "", + "hash": "", + "headphones": "", + "heart": "", + "help-circle": "", + "hexagon": "", + "home": "", + "image": "", + "inbox": "", + "info": "", + "instagram": "", + "italic": "", + "key": "", + "layers": "", + "layout": "", + "life-buoy": "", + "link-2": "", + "link": "", + "linkedin": "", + "list": "", + "loader": "", + "lock": "", + "log-in": "", + "log-out": "", + "mail": "", + "map-pin": "", + "map": "", + "maximize-2": "", + "maximize": "", "meh": "", - "menu": "<\/line><\/line><\/line>", - "message-circle": "<\/path>", - "message-square": "<\/path>", - "mic-off": "<\/line><\/path><\/path><\/line><\/line>", - "mic": "<\/path><\/path><\/line><\/line>", - "minimize-2": "<\/polyline><\/polyline><\/line><\/line>", - "minimize": "<\/path>", - "minus-circle": "<\/circle><\/line>", - "minus-square": "<\/rect><\/line>", - "minus": "<\/line>", - "monitor": "<\/rect><\/line><\/line>", - "moon": "<\/path>", - "more-horizontal": "<\/circle><\/circle><\/circle>", - "more-vertical": "<\/circle><\/circle><\/circle>", - "move": "<\/polyline><\/polyline><\/polyline><\/polyline><\/line><\/line>", - "music": "<\/path><\/polyline>", - "navigation-2": "<\/polygon>", - "navigation": "<\/polygon>", - "octagon": "<\/polygon>", - "package": "<\/path><\/polyline><\/line><\/line>", - "paperclip": "<\/path>", - "pause-circle": "<\/circle><\/line><\/line>", - "pause": "<\/rect><\/rect>", - "percent": "<\/line><\/circle><\/circle>", - "phone-call": "<\/path>", - "phone-forwarded": "<\/polyline><\/line><\/path>", - "phone-incoming": "<\/polyline><\/line><\/path>", - "phone-missed": "<\/line><\/line><\/path>", - "phone-off": "<\/path><\/line>", - "phone-outgoing": "<\/polyline><\/line><\/path>", - "phone": "<\/path>", - "pie-chart": "<\/path><\/path>", - "play-circle": "<\/circle><\/polygon>", - "play": "<\/polygon>", - "plus-circle": "<\/circle><\/line><\/line>", - "plus-square": "<\/rect><\/line><\/line>", - "plus": "<\/line><\/line>", - "pocket": "<\/path><\/polyline>", - "power": "<\/path><\/line>", - "printer": "<\/polyline><\/path><\/rect>", - "radio": "<\/circle><\/path>", - "refresh-ccw": "<\/polyline><\/polyline><\/path>", - "refresh-cw": "<\/polyline><\/polyline><\/path>", - "repeat": "<\/polyline><\/path><\/polyline><\/path>", - "rewind": "<\/polygon><\/polygon>", - "rotate-ccw": "<\/polyline><\/path>", - "rotate-cw": "<\/polyline><\/path>", - "rss": "<\/path><\/path><\/circle>", - "save": "<\/path><\/polyline><\/polyline>", - "scissors": "<\/circle><\/circle><\/line><\/line><\/line>", - "search": "<\/circle><\/line>", - "send": "<\/line><\/polygon>", - "server": "<\/rect><\/rect><\/line><\/line>", - "settings": "<\/circle><\/path>", - "share-2": "<\/circle><\/circle><\/circle><\/line><\/line>", - "share": "<\/path><\/polyline><\/line>", - "shield-off": "<\/path><\/path><\/line>", - "shield": "<\/path>", - "shopping-bag": "<\/path><\/line><\/path>", - "shopping-cart": "<\/circle><\/circle><\/path>", - "shuffle": "<\/polyline><\/line><\/polyline><\/line><\/line>", - "sidebar": "<\/rect><\/line>", - "skip-back": "<\/polygon><\/line>", - "skip-forward": "<\/polygon><\/line>", - "slack": "<\/path><\/line><\/line><\/line><\/line>", - "slash": "<\/circle><\/line>", - "sliders": "<\/line><\/line><\/line><\/line><\/line><\/line><\/line><\/line><\/line>", - "smartphone": "<\/rect><\/line>", + "menu": "", + "message-circle": "", + "message-square": "", + "mic-off": "", + "mic": "", + "minimize-2": "", + "minimize": "", + "minus-circle": "", + "minus-square": "", + "minus": "", + "monitor": "", + "moon": "", + "more-horizontal": "", + "more-vertical": "", + "mouse-pointer": "", + "move": "", + "music": "", + "navigation-2": "", + "navigation": "", + "octagon": "", + "package": "", + "paperclip": "", + "pause-circle": "", + "pause": "", + "pen-tool": "", + "percent": "", + "phone-call": "", + "phone-forwarded": "", + "phone-incoming": "", + "phone-missed": "", + "phone-off": "", + "phone-outgoing": "", + "phone": "", + "pie-chart": "", + "play-circle": "", + "play": "", + "plus-circle": "", + "plus-square": "", + "plus": "", + "pocket": "", + "power": "", + "printer": "", + "radio": "", + "refresh-ccw": "", + "refresh-cw": "", + "repeat": "", + "rewind": "", + "rotate-ccw": "", + "rotate-cw": "", + "rss": "", + "save": "", + "scissors": "", + "search": "", + "send": "", + "server": "", + "settings": "", + "share-2": "", + "share": "", + "shield-off": "", + "shield": "", + "shopping-bag": "", + "shopping-cart": "", + "shuffle": "", + "sidebar": "", + "skip-back": "", + "skip-forward": "", + "slack": "", + "slash": "", + "sliders": "", + "smartphone": "", "smile": "", - "speaker": "<\/rect><\/circle><\/line>", - "square": "<\/rect>", - "star": "<\/polygon>", - "stop-circle": "<\/circle><\/rect>", - "sun": "<\/circle><\/line><\/line><\/line><\/line><\/line><\/line><\/line><\/line>", - "sunrise": "<\/path><\/line><\/line><\/line><\/line><\/line><\/line><\/polyline>", - "sunset": "<\/path><\/line><\/line><\/line><\/line><\/line><\/line><\/polyline>", - "tablet": "<\/rect><\/line>", - "tag": "<\/path><\/line>", - "target": "<\/circle><\/circle><\/circle>", - "terminal": "<\/polyline><\/line>", - "thermometer": "<\/path>", - "thumbs-down": "<\/path>", - "thumbs-up": "<\/path>", - "toggle-left": "<\/rect><\/circle>", - "toggle-right": "<\/rect><\/circle>", - "tool": "<\/path>", - "trash-2": "<\/polyline><\/path><\/line><\/line>", - "trash": "<\/polyline><\/path>", - "trending-down": "<\/polyline><\/polyline>", - "trending-up": "<\/polyline><\/polyline>", - "triangle": "<\/path>", - "truck": "<\/rect><\/polygon><\/circle><\/circle>", - "tv": "<\/rect><\/polyline>", - "twitter": "<\/path>", - "type": "<\/polyline><\/line><\/line>", - "umbrella": "<\/path>", - "underline": "<\/path><\/line>", - "unlock": "<\/rect><\/path>", - "upload-cloud": "<\/polyline><\/line><\/path><\/polyline>", - "upload": "<\/path><\/polyline><\/line>", - "user-check": "<\/path><\/circle><\/polyline>", - "user-minus": "<\/path><\/circle><\/line>", - "user-plus": "<\/path><\/circle><\/line><\/line>", - "user-x": "<\/path><\/circle><\/line><\/line>", - "user": "<\/path><\/circle>", - "users": "<\/path><\/circle><\/path><\/path>", - "video-off": "<\/path><\/line>", - "video": "<\/polygon><\/rect>", - "voicemail": "<\/circle><\/circle><\/line>", - "volume-1": "<\/polygon><\/path>", - "volume-2": "<\/polygon><\/path>", - "volume-x": "<\/polygon><\/line><\/line>", - "volume": "<\/polygon>", - "watch": "<\/circle><\/polyline><\/path>", - "wifi-off": "<\/line><\/path><\/path><\/path><\/path><\/path><\/line>", - "wifi": "<\/path><\/path><\/path><\/line>", - "wind": "<\/path>", - "x-circle": "<\/circle><\/line><\/line>", - "x-square": "<\/rect><\/line><\/line>", - "x": "<\/line><\/line>", - "youtube": "<\/path><\/polygon>", - "zap-off": "<\/polyline><\/polyline><\/polyline><\/line>", - "zap": "<\/polygon>", - "zoom-in": "<\/circle><\/line><\/line><\/line>", - "zoom-out": "<\/circle><\/line><\/line>" + "speaker": "", + "square": "", + "star": "", + "stop-circle": "", + "sun": "", + "sunrise": "", + "sunset": "", + "tablet": "", + "tag": "", + "target": "", + "terminal": "", + "thermometer": "", + "thumbs-down": "", + "thumbs-up": "", + "toggle-left": "", + "toggle-right": "", + "tool": "", + "trash-2": "", + "trash": "", + "trello": "", + "trending-down": "", + "trending-up": "", + "triangle": "", + "truck": "", + "tv": "", + "twitch": "", + "twitter": "", + "type": "", + "umbrella": "", + "underline": "", + "unlock": "", + "upload-cloud": "", + "upload": "", + "user-check": "", + "user-minus": "", + "user-plus": "", + "user-x": "", + "user": "", + "users": "", + "video-off": "", + "video": "", + "voicemail": "", + "volume-1": "", + "volume-2": "", + "volume-x": "", + "volume": "", + "watch": "", + "wifi-off": "", + "wifi": "", + "wind": "", + "x-circle": "", + "x-octagon": "", + "x-square": "", + "x": "", + "youtube": "", + "zap-off": "", + "zap": "", + "zoom-in": "", + "zoom-out": "" } diff --git a/src/index.js b/src/index.js index b2d55d7..4bc725a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,40 +1,41 @@ -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import IconInner from './IconInner'; -class FeatherIcon extends Component { - render() { - const { icon, size, className, fill, ...otherProps } = this.props; - - return ( - - - - ); +const FeatherIcon = ({ + icon, + size = 24, + className = '', + fill = 'none', + ...otherProps +}) => { + if (!icon) { + return null; } -} + + return ( + + + + ); +}; FeatherIcon.propTypes = { - icon: PropTypes.string.isRequired, + icon: PropTypes.string.isRequired, // the icon name that matches exactly from feathericons size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), className: PropTypes.string, fill: PropTypes.string }; -FeatherIcon.defaultProps = { - size: 24, - className: '' -}; - export default FeatherIcon;