feathericons / react-feather Goto Github PK

I am working on an application where we allow users to set an icon name. We'd refer them to https://feathericons.com/ and say we support any of those icon names. In this library, you get an element reference with PascalCase format, as is conventional for a React element. It'd be convenient to have a way to get a reference to a React element from a dashed-format name. Something like this:

import * as Icon from 'react-feather';

...
const MyIcon = Icon.get('alert-circle');
// <MyIcon /> is now the same as <AlertCircle />
...

I see there's been a request for a react-native version #15 but could we try to have universal support by using svgs instead of react-native-svg so it supports both:

• react
• react-native
• react-native-web

Is it possible to include custom svg icons? If so can it be added to the documentation?

I love this library. Would it be possible to include TypeScript type definitions? This should be as simple as including a file named index.d.ts in the package and (optionally) adding the corresponding "types": "index.d.ts" line to the package.json.

I am attaching a rough and essentially simple draft of the type definitions for the library as of today:
https://gist.github.com/sgoll/bf270de030d339215f4964dbd50efc28

Would be great if the component can be styled with a className prop similar to react-icons.

Nevermind, it does work, I had my style sheet configured wrong. Thanks for this great package!

Hello, we plan on using your lib at my company.

However, the "PenTool" which we use, is not available.

In my app, icon names come from an external resource as strings for the navigation.

{
   "nav":[
      {
         "id":1,
         "title":"Home",
         "icon":"Home"
      }
   ]
}

I need something like;

<Icon name={item.icon} />

I couldn't find a way to create this icon dynamically, can't we do this?

A few icons have been added that would be lovely to have - can create a PR if it helps!

Can we add Todoist Done, Progress, and Pending icons to the feathericons?

Running webpack bundle analyzer, I am seeing every icon being included in my minified bundles:

Not sure if I am doing something wrong of if there is a problem in the package.

babelrc settings:

{
    "presets": [
        ["env", {
            "loose": true,
            "modules": false
        }], "react"
    ],
    plugins: [
        'syntax-dynamic-import',
        'transform-object-rest-spread',
        'transform-class-properties'
    ]
}

there is away to auto update ?

This is more of a question rather than an issue. But I see that for all icons, the strokeWidth is always set to 2. Except for the size and stroke, almost all SVG properties are directly assigned. Is the expectation to change them with CSS?

I would love to do something like this <CheckCircle color="#000" />

How can i set icon size from 24 to some other size by default

I've noticed there has been practically no activity since April while there are several important issues and PRs with no response.
Especially #72 seems to be important with the new React release and how NPM handles peerDeps now, which can be difficult in projects.

@carmelopullara seems to be the primary maintainer; Will there be any more work on this repo?

Forking is of course an option, and I'd happily do so as I use this package in several projects, but I'd rather have this repo stay the main location for this library!

Some libraries rely on proper ref forwarding (e.g. see tippy.js docs mentioning it). Unfortunately right now none of the icon components forward ref, which can be improved with something like

import React, { forwardRef } from 'react';

const Activity = forwardRef((props, ref) => {
  const { color, size, ...otherProps } = props;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      ...
      ref={ref}
    >
  ...

Please update feather-icons to include newly added icons.

Thanks 👍

Hello,

is there any easy way to add a hover effect e.g. when mouseOver change color to yellow?
I tried the following:

onMouseOver={(evt) => evt.target.setAttribute('style', 'stroke: gray')}
onMouseLeave={(evt) => evt.target.setAttribute('style', 'stroke: white')}

But this has got a problem with multiple paths. It does only color the selected path not all paths of the svg.

It was my mistake. Sorry.

Is there a way to spin an icon?

Something like:

<Loader spin={true} />

From what I can tell, the README suggests the following approach to import the Camera component in the absence of ES6 imports:

var Camera = require('react-feather/dist/icons/camera');

However, the published dist/.../camera.js file exports like this:

exports.default = Camera;

Thus, it seems like the README should read:

If you can't use ES6 imports, it's possible to include icons from the compiled folder ./dist.

var Camera = require('react-feather/dist/icons/camera').default;

var MyComponent = React.createClass({
  render: function () {
    return (
      <Camera />
    );
  }
});

Or, perhaps, I am just missing something...

I'm moving a project to TypeScript and I can't use ref :)

The code:

<Info size={ 14 } color="#BDC1C7" ref={ infoIcon } />

The compiler error:

Type error: Type '{ size: number; color: string; ref: MutableRefObject<SVGElement>; }' is not assignable to type 'IntrinsicAttributes & Props & { children?: ReactNode; }'.
  Property 'ref' does not exist on type 'IntrinsicAttributes & Props & { children?: ReactNode; }'. Did you mean 'href'?

Not sure what type to use for forwardRef function component, but seems like FC doesn't include any ref property 🤔

prop-types is listed as a peer dependency, however:

1. It isn't actually required at runtime as far as I can tell.
2. Many users (e.g. TypeScript users) won't be using it, so even if I'm wrong on the first point it probably shouldn't be required.

I noticed, that size prop is applied to width and height of svg. However, viewBox remains constant. Shouldn't it be updated accordingly?

https://github.com/carmelopullara/react-feather/blob/6948db542e8146a760e433b7496919393b8d306d/src/icons/x.js#L9-L11

New Slack icon would be great to use.

Adding the class "feather" to SVG elements would make it easier to apply CSS styles to icons.

Following is an example an SVG element that include a CSS class from https://feathericons.com:

<svg class="feather feather-activity sc-dnqmqq jxshSx" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-reactid="36"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>

Is there no icon included for google? I need a google icon on a login form.

Does it not make sense to have a reusable icon component of our own that utilizes react-feather, and therefore be able to do something like <Icon icon={this.props.icon} />?

I'm aware that we can always pass an icon like <Camera /> down as a prop, but I'm wondering if it's possible to this just by the name of the icon.

Is there an option to set the icon as an css attribute? Something like

import { ArrowLeftCircle, ArrowRight } from 'react-feather';

domElement.style.cursor = ArrowLeftCircle?

Hi @carmelopullara it would be great to update to feather 4.7.0

Thank you so much for your work!

Commit: 11f51d6
Introduced a renaming of the Props interface to IconProps with makes it a breaking change to previous versions.

onClick

I have been using react-feather for a lot of my internal administration apps over the last year or so. It's very straight forward to work with and works well on all the devices that I develop for. Lately, we have been doing an accessibility audit on some of the applications and one of the things came up is the fact that when icons are used as "buttons" they are missing "alt text" / helpful info on what will happen.

I have been reading up on what seems to be the common way to achieve this with the inline SVGs as those react-feather produces. The most common option seems to be using a <title>-tag inside the element with the alt text that you want to show. I would love it if it was possible to set the "alt" attribute (like that used for

If the user does not specify the alt attribute, the icon should render as it always has to make sure it's backward compatible.

If the alt attribute is specified, I imagine that using, for example, the File icon like this:

<File alt="Navigate to report" />

should produce HTML along the following, the change being the <title>-tag inserted:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <title>Navigate to report</title>
    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
    <polyline points="14 2 14 8 20 8"></polyline>
    <line x1="16" y1="13" x2="8" y2="13"></line>
    <line x1="16" y1="17" x2="8" y2="17"></line>
    <polyline points="10 9 9 9 8 9"></polyline>
</svg>

This will allow Chrome to display a tooltip when you mouse over the icon, just like the alt text of img tags:

Do you think this sounds like a reasonable change?

Any idea how I can get a string so I can use these in the background-image property rather than as a svg element?

It works on React Native?

Hi,

I created this React Native version based on your project: https://github.com/colmbrady/react-native-feather

It is basically a copy of your project, but the build script outputs React Native components.

Are you interested in supporting both React and React Native in your library? If you are, I would gladly work on a P.R into your project, and close mine.

Otherwise, if you have no interest, I will publish mine to NPM also.

It would be really helpful, to have an info about what version of feather the current version of react-feather represents in the Readme. Even if it's just a small badge or something

After comparing changelogs/commit history this seems to currently be 4.7.x (with e.g. "coffee" from 4.8 yet missing)

I know that the goal would be to always be in sync as soon as possible, but it would be nice to not be in the dark if this is currently the case or not.

Thanks!

i think there must be a google icon

I can't seem to use the following:

import * as Icon from 'react-feather'

...
render() {
    return <Icon.PenTool />
}

I also can't find it in the bit.dev website.

The latest build of feather icons is 4.24.0 and the build that react-feather is using is 4.22.1

Icon.{variable} can i do this

Hi 👋

Trying to use this library in a TypeScript project and running into an issue because the types aren't actually available. In package.json I can see that the types should be in dist/index.d.ts but that file is never actually copied across from src during build 👍

Thanks!

Description

On the feather icons website there are "customization" controls for previewing the icons. The options for the controls are:

• Size
• Stroke width
• Color

Currently, only size and color are exposed as props. It looks like the strokeWidth for each icon is being hard-coded as 2 (example).

This seems like a fairly straightforward adjustment. If you're accepting PRs, I'd be happy to add it!

I'm getting an error:

Invariant Violation: View config not found for name path. Make sure to start component names with a capital letter.

This error is located at:
in path (created by LogOut)
in svg (created by LogOut)
in LogOut (at List.js:37)

In List.js (line 37) I used the icon like that:

<LogOut onPress={handleLogout} size={25} />

and imported like this:

import {LogOut} from 'react-feather';

Is there a reason GitHub uses PascalCase while Gitlab uses Snakecase?

export { default as GitHub } from './icons/github';
export { default as Gitlab } from './icons/gitlab';

Proposal:
Change Gitlab to GitLab

Similar to this issue SVGs in IE11 are focusable by default (using the tab key). Since I'm using react-feather icons alongside form fields for validation, this makes navigating the form using the tab key quite tedious in IE11.

The fix: add focusable="false" to all svg elements.

See also: https://stackoverflow.com/questions/18646111/disable-onfocus-event-for-svg-element

Hi,

Do you plan to upgrade to React 17 to avoid npm dependency conflict?