ianmiller347 / feather-icons-react Goto Github PK

when feather releases new icons, it is a manual process to generate the icons json and then copy them over to this repo

create an easy 'upgrade script' that will pull the new icons in more easily

16 missing icons compared to feathericon repo, please update json.

codesandbox
coffee
columns
divide-circle
divide-square
divide
dribbble
figma
framer
hexagon
key
mouse-pointer
pen-tool
trello
twitch
x-octagon

I noticed there are a few icons missing from more recent updates to the feather library, I was hoping you'd be willing and able to update this, as I prefer this library over react-feather.

I wanted to make the changes myself and then submit a PR but I think I'm misunderstanding the build process.

In case it's relevant here's the missing icons:

{"missing": ["archive", "arrow-down-circle", "arrow-left-circle", "arrow-right-circle", "arrow-up-circle", "book-open", "code", "database", "dollar-sign", "folder-minus", "folder-plus", "gift", "git-branch", "git-commit", "git-merge", "git-pull-request", "hard-drive", "linkedin", "rss", "send", "shield-off", "shopping-bag", "terminal", "truck", "youtube", "zap-off"]}

Any help is appreciated!

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on. I loved that we can expose the package and just use the icon parameter to decide which icon to use instead of importing svg elements one by one.

Anyway, I'm trying to adjust the strokeWidth with this package but I realize that it is not exposed as one of the parameter. I believe this can be easily done via changing two lines of code.

How it will look like in code:

Result:

Here is the diff that solved my problem:

diff --git a/node_modules/feather-icons-react/build/FeatherIcon.js b/node_modules/feather-icons-react/build/FeatherIcon.js
index 0d184cf..87dd873 100644
--- a/node_modules/feather-icons-react/build/FeatherIcon.js
+++ b/node_modules/feather-icons-react/build/FeatherIcon.js
@@ -84,6 +84,7 @@ var FeatherIcon = function FeatherIcon(_ref) {
   var icon = _ref.icon,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
+      strokeWidth = _ref.strokeWidth || "2",
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
       _ref$fill = _ref.fill,
@@ -100,7 +101,7 @@ var FeatherIcon = function FeatherIcon(_ref) {
     viewBox: "0 0 24 24",
     fill: fill,
     stroke: "currentColor",
-    strokeWidth: "2",
+    strokeWidth: strokeWidth,
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className: "feather feather-".concat(icon, " ").concat(className)

This issue body was partially generated by patch-package.

I want to use this package in a Typescript project, but the types seem to be missing. Any chance we can get those?

If I don't have prop-types under packages in package-lock.json, I get this error when I try to load any feather icons:

Import trace for requested module:
./node_modules/feather-icons-react/build/index.js
./src/app/page.tsx
 ⨯ ./node_modules/feather-icons-react/build/FeatherIcon.js:10:40
Module not found: Can't resolve 'prop-types'

This can be reproduced by running npx create-next-app@latest and declining the 'use ESLint' option since it adds prop-types as a dependency. page.tsx can be something like this:

import FeatherIcon from "feather-icons-react";

export default function Home() {
    return (
        <FeatherIcon icon="feather" />
    );
}

Hey there, would you consider adding support for the fill prop? I'd like to show icons like hearts and bookmarks as filled once users have interacted with them. The change looks trivial and I'd be happy to issue a pull request.

Thanks!

You are reading the icons from a single JSON file that has to be loaded with every single icon. If you generated them all as separate components that were required independently then a bundler would not need to include icons that are not being used in the output.

In particular I found "smile", "meh" and "frown" were missing

Sorry newbie question but how can change the colors for the icons?

Some icons seems to be old versions on the v4.28

by default, babel only looks at JS files

add a line to the build script that will copy the icons.json file from src to build folder (babel can likely be configured to do this as well)

Since it does import icons from './icons.json'; and the json file contains (or should contain) valid XML, it is questionable why it should use something like DOMPurify. Whoever can edit the XML, can also edit the javascript (and for example remove or replace DOMPurify).

But if using a tool like DOMPurify is wished for, it would be good not to re-initialize that object every time and to cache the validated markup and not revalidate the same strings over and over again.