npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-feather1s

v0.2.3

Published

Customized feather icons with stroke-width set to 1

Downloads

33

Readme

PRs Welcome License

First of all I would like to say HUGE thank you to Cole Bemis, who created in my opinion the most beautiful icon package Feather icons and to Joel Arvidsson for his react-native-vector-icons!

About

react-native-feather1s provides Feather icons with stroke-width set to 1 instead of it's default value 2 (in react-native-vector-icons package). Most of original feather icons are already converted and are ready to be used!

Current version of feather icons in react-native-vector-icons package does not contain all the images from feathericons set. In this package you can find all the icons from feathericons set.

react-native-feathers uses react-native-vector-icons (https://github.com/oblador/react-native-vector-icons) as peer dependency so it's up to you to install react-native-vector-icons by yourself. For installation instructions see https://github.com/oblador/react-native-vector-icons#installation

What this package delivers?

Following animated picture represent all the icons that are available in this package. Currently there is 279 converted feather icons available and I will try to do my best to keep tracking and converting all new icons from original icon pack. If you find some icons are missing please, open new issue and let me know or feel free to raise a pull reuqest!

You can find all supported icons on our webpage https://sinodko.github.io/feather1s-web/

On following picture you can see comparision between react-native-vector-icons feather icon pack and our icon pack:

| react-native-vector-icons feather icons | react-native-feather1s | | :-------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: | | | |


Real life example

Using react-navigation bottom tab navigation:

| Default Feather icons | Our thin Feather icons | | :-------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: | | | |


Installation

  1. Install package via:

    yarn add react-native-feather1s
    
    or
    
    npm install react-native-feather1s
  2. Link new icon font into your project using command:

    react-native link react-native-feather1s

The package should be ready to use now!

Usage

Find an icon that you would like to use at feathericons (when you find an icon which isn't converted yet and cannot be used with these package please, create a new issue).

Simply import Icon from this package:

import Icon from "react-native-feather1s";

And use component where you need it:

<Icon name="globe" size={26} iconStyle={styles.yourStyle} color="#27AE60" />

You can also use origin Feather icons from react-native-vector-icons if you set thin prop to false:

<Icon
  name="globe"
  size={26}
  iconStyle={styles.yourStyle}
  color="#27AE60"
  thin={false}
/>

Properties:

| Prop/s | Description | Default | | :---------: | :--------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: | | thin | If property is set to true (default), you're using icons from this package. Otherwise, you will use origin Feather Icons! | true | | other props | All properties from react-native-vector-icons package. You can find them here | props |

Others

You can find source files of this icon font at https://github.com/sinodko/feather1s. Feel free to copy and use it. It would be great if you would like to contribute. Feel free to raise a Pull Request!

License

This project is licenced under the MIT License.

Feather icons are copyright under MIT License.