Nucleic Photon Magnetizer

    This package has been deprecated

    Author message:

    Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

    @breeffy/react-native-svg-icons
    TypeScript icon, indicating that this package has built-in type declarations

    0.5.0 • Public • Published

    react-native-svg-icons

    npm npm tests on master

    Introduction

    This React Native component aims to be improved drop-in replacement for react-native-fontawesome. It allows to use FontAwesome 5 / FontAwesome 5 Pro icons as SVG icons.

    Difference between react-native-svg-icons and react-native-fontawesome

    Feature Description
    Built-in and up-to-date Typescript types react-native-svg-icons was rewritten using Typescript and automatically generates and packages *.d.ts files into npm package. This ensures types are always up-to-date. You don't need to download them from somewhere else.
    style property accepts array of styles This makes react-native-svg-icons compatible with styled-components and it's all modern features like css property
    Deprecated width and height properties were removed You should use unified size property
    Duotone icons are not supported Both in react-native-svg-icons and react-native-fontawesome

    Installation

    $ yarn add "react-native-svg"
    $ yarn add "@fortawesome/fontawesome-svg-core"
    $ yarn add "@fortawesome/free-solid-svg-icons"
    $ yarn add "@fortawesome/react-native-fontawesome"
    $ yarn add "@breeffy/react-native-svg-icons"
    

    Add additional FontAwesome 5 styles or Pro version icons

    Visit fontawesome.com/icons to search for free and Pro icons

    $ yarn add "@fortawesome/free-brands-svg-icons"
    $ yarn add "@fortawesome/free-regular-svg-icons"
    

    If you are a Font Awesome Pro subscriber you can install Pro packages; this requires additional configuration.

    $ yarn add "@fortawesome/pro-solid-svg-icons"
    $ yarn add "@fortawesome/pro-regular-svg-icons"
    $ yarn add "@fortawesome/pro-light-svg-icons"
    

    How to use SVG Icons

    You can use SVG Icons in your React Native components like this:

    import { SvgIcon } from '@breeffy/react-native-svg-icons';
    ...
    <SvgIcon
      color={'#262F56'}
      icon={['far', 'coffee']}
      size={24}
    />

    Also you can use SvgIcon with styled-components. Below example shows how to use styled-components css prop

    import 'styled-components/macro';
    ...
    <SvgIcon
      css={`
        margin-top: 15px;
      `}
      color={iconColor}
      icon={['far', iconName]}
      size={24}
    />

    Color

    Color can be specified either through top-level color property or as color property of style objects.

    1. IF top-level color property is provided it takes precendence and will be used
    2. ELSE IF any style object's color property is provided will be used the most last one
    3. ELSE DEFAULT_COLOR = '#000' will be used

    Color Property Example

    import { SvgIcon } from '@breeffy/react-native-svg-icons';
    ...
    <SvgIcon
      color={'#262F56'}
      icon={ faCoffee }
    />

    Size

    Size can be specified using to-level size property. If size property is not provided will be used export const DEFAULT_SIZE = 16;

    width and height properties of style objects are not supported and will be ignored. You should use unified size property.

    Size Property Example

    import { SvgIcon } from '@breeffy/react-native-svg-icons';
    ...
    <SvgIcon
      size={ 32 }
      icon={ faCoffee }
    />

    Features

    Masking

    import { SvgIcon } from '@breeffy/react-native-svg-icons';
    ...
    <SvgIcon
      mask={['far', 'circle']}
      icon={ faCoffee }
    />

    More on masking...

    Power Transforms

    import { SvgIcon } from '@breeffy/react-native-svg-icons';
    ...
    <SvgIcon icon="arrows" transform="shrink-6 left-4" />
    <SvgIcon icon="arrow-rightr" transform={{ rotate: 42 }} />

    More on power transforms...

    Integration

    More detailed guides how to use and configure FontAwesome 5 icons can be found at react-native-fontawesome

    Frequent questions

    How do I import the same icon from two different styles?

    With ES modules and import statements we can rename:

    import { library } from '@fortawesome/fontawesome-svg-core'
    import { faStroopwafel as fasFaStroopwafel } from '@fortawesome/pro-solid-svg-icons'
    import { faStroopwafel as farFaStroopwafel } from '@fortawesome/pro-regular-svg-icons'
    
    library.add(fasFaStroopwafel, farFaStroopwafel)

    I don't think tree-shaking is working; got any advice?

    Check out our docs here.

    How to Help

    Review the following docs before diving in:

    Install

    npm i @breeffy/react-native-svg-icons

    DownloadsWeekly Downloads

    10

    Version

    0.5.0

    License

    Apache-2.0

    Unpacked Size

    76.8 kB

    Total Files

    23

    Last publish

    Collaborators

    • victor.malov