ianmiller347 / feather-icons-react Goto Github PK
View Code? Open in Web Editor NEWFeather Icons as a React Component
Feather Icons as a React Component
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
Some icons seems to be old versions on the v4.28
In particular I found "smile", "meh" and "frown" were missing
I want to use this package in a Typescript project, but the types seem to be missing. Any chance we can get those?
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
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.
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!
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:
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.
Sorry newbie question but how can change the colors for the icons?
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" />
);
}
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)
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!
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.