Iconify icon component for React

Last update: May 7, 2022

This repository contains old version 1 of Iconify for React.

The latest version has been moved to Iconify monorepo: https://github.com/iconify/iconify/tree/master/packages/react

Iconify for React

Iconify is a modern open source SVG alternative to glyph fonts. It is a unified framework, aimed to offer all popular icon sets with one easy to use syntax: Font Awesome, Material Design Icons, Jam Icons and several emoji sets: Noto Emoji, Twemoji, EmojiOne, Firefox OS Emoji.

You can use over 40,000 icons without installing multiple dependencies. It can also be used with custom and premium icon sets. No fonts, no massive packages.

Iconify for React generates separate files for each icon, so when compiling your application only icons you use in project will be bundled. That means you can use FontAwesome, MDI, Vaadin, EmojiOne and other icons on same page without loading massive amounts of data.

Installation

If you are using NPM:

npm install @iconify/react

If you are using Yarn:

yarn add @iconify/react

This package does not include icons. Icons are split into separate packages that available at NPM. See below.

Usage

Install @iconify/react and packages for selected icon sets. Import Icon and/or InlineIcon from @iconify/react and icon data for icon you want to use:

import { Icon, InlineIcon } from "@iconify/react";
import home from "@iconify/icons-mdi-light/home";
import faceWithMonocle from "@iconify/icons-twemoji/face-with-monocle";

Then use Icon or InlineIcon component with icon data as "icon" parameter:

<Icon icon={home} />
<p>This is some text with <InlineIcon icon={faceWithMonocle} /></p>

Icon and InlineIcon

Both components are the same, the only difference is InlineIcon has negative vertical alignment, so it behaves like a glyph.

Use Icon for decorations, InlineIcon if you are migrating from glyph font.

Properties

You can pass any custom properties to Icon and InlineIcon.

Custom properties:

  • icon - required property, value is icon data.
  • width, height - width and/or height of icon. If one attribute is set, other attribute will be calculated using width/height ratio of icon. Default value is "1em".
  • hFlip, vFlip - boolean attributes. You can use them to flip icon vertically or horizontally
  • flip - string attribute, same as hFlip and vFlip. Value is "horizontal", "vertical" or "horizontal,vertical"
  • rotate - rotate icon. Value is number 0-3 (1 = 90deg, 2 = 180deg, 3 = 270deg) or string "90deg", "180deg", "270deg"
  • color - icon color, usable only for colorless icons. By default colorless icons use currentColor, so you can set color using stylesheet by setting text color. This property can override it.
  • align - icon alignment. It matters only when width and height are both set and width/height ratio doesn't match icon ratio. Value is a string that includes any of these values separated by comma: horizontal alignment: "left", "center", "right", vertical alignment: "top", "middle", "bottom", slice: "meet", "slice". Example: align="left,middle,slice". Default value is "center,middle,meet"

TypeScript

Iconify for React is compatible with TypeScript.

If you are using TypeScript, only attributes "id", "className" and "style" are passed to node. If you want to pass other custom attributes, edit dist/icon.d.ts file (or suggest a change by opening issue on @iconify/react repository).

Icon Packages

As of version 1.1.0 this package no longer includes icons. There are over 40k icons, each in its own file. That takes a lot of disc space. Because of that icons were moved to multiple separate packages, one package per icon set.

You can find all available icons at https://iconify.design/icon-sets/

Browse or search icons, click any icon and you will see a "React" tab that will give you exact code for the React component.

Import format for each icon is "@iconify/icon-{prefix}/{icon}" where {prefix} is collection prefix, and {icon} is the icon name.

Usage examples for a few popular icon packages:

Material Design Icons

Package: https://www.npmjs.com/package/@iconify/icons-mdi

Icons list: https://iconify.design/icon-sets/mdi/

Installation:

npm install @iconify/icons-mdi

Usage:

import { Icon, InlineIcon } from "@iconify/react";
import home from "@iconify/icons-mdi/home";
import accountCheck from "@iconify/icons-mdi/account-check";
<Icon icon={home} />
<p>This is some text with <InlineIcon icon={accountCheck} /></p>

Simple Icons (big collection of logos)

Package: https://www.npmjs.com/package/@iconify/icons-simple-icons

Icons list: https://iconify.design/icon-sets/simple-icons/

Installation:

npm install @iconify/icons-simple-icons

Usage:

import { Icon, InlineIcon } from "@iconify/react";
import behanceIcon from "@iconify/icons-simple-icons/behance";
import mozillafirefoxIcon from "@iconify/icons-simple-icons/mozillafirefox";
<Icon icon={behanceIcon} />
<p>Mozilla Firefox <InlineIcon icon={mozillafirefoxIcon} /> is the best browser!</p>

Font Awesome 5 Solid

Package: https://www.npmjs.com/package/@iconify/icons-fa-solid

Icons list: https://iconify.design/icon-sets/fa-solid/

Installation:

npm install @iconify/icons-fa-solid

Usage:

import { Icon, InlineIcon } from "@iconify/react";
import toggleOn from "@iconify/icons-fa-solid/toggle-on";
import chartBar from "@iconify/icons-fa-solid/chart-bar";
<Icon icon={chartBar} />
<p><InlineIcon icon={toggleOn} /> Click to toggle</p>

Noto Emoji

Package: https://www.npmjs.com/package/@iconify/icons-noto

Icons list: https://iconify.design/icon-sets/noto/

Installation:

npm install @iconify/icons-noto

Usage:

import { Icon, InlineIcon } from "@iconify/react";
import greenApple from "@iconify/icons-noto/green-apple";
import huggingFace from "@iconify/icons-noto/hugging-face";
<Icon icon={greenApple} />
<p>Its time for hugs <InlineIcon icon={huggingFace} />!</p>

Other icon sets

There are over 50 icon sets. This readme shows only few examples. See Iconify icon sets for a full list of available icon sets. Click any icon to see code.

License

React component is released with MIT license.

© 2019 Vjacheslav Trushkin

See Iconify icon sets page for list of collections and their licenses.

GitHub

https://github.com/iconify/iconify-react
Comments
  • 1. Unhandled Rejection (SyntaxError): Unexpected identifier

    Hi, We try to install iconify-react but we always have an error message : ErrorMessageIconify

    We follow one by one the steps you give, It seems to come from the import because we try to select one by one the code lines.

    Do you have some tips or informations to help us ? Thank you very much !

    Reviewed by DorineLam at 2019-04-30 13:57
  • 2. FeatureRequest: Model for dynamically referencing icons

    What is the cleanest way to dynamically include an icon in a React component? eg when an icon name is passed as a prop to the component and the component needs to display the icon.

    The structure of the packages do not lend themselves to import IconSet from '@iconify/icons-[set]' and use IconSet[iconname]

    Reviewed by userings at 2020-04-03 14:21
  • 3. Fallback icon

    When using this component without api, it would be nice to provide fallback icons in case the icon is not in the bundle.

    Right now the only way I see is manually checking via a ref and then loading a fallback.

    Reviewed by boy51 at 2021-04-14 15:31
  • 4. [Browser Support] Iconify/React 1.1.1 is not <= 11 compatible.

    the npm distributed bundle @iconify/react is not presently being transpiled for backwards compatibility.

    An example of said incompatibility can be found here: https://github.com/iconify/iconify-react/blob/master/src/icon.js#L62

    Object.assign is not compatible with IE less than Edge. Are there any plans to support older browsers like Iconify itself? Thanks in advance!

    Reviewed by bsolovij-ebsco at 2020-02-25 18:12
  • 5. Move React from "dependencies" to "peerDependencies"

    Was hoping to move React from "dependencies" to "peerDependencies". Will you accept a pull request?

    Ran in to this issue today, going to quote a Stack Overflow answer that explains it better than I can:

    For reusable components:

    Put a react dependency in both peerDependencies and devDependencies.
    Never put a react dependency in dependencies.
    

    peerDependencies specifies which version(s) of React your reusable component supports/requires. When using npm 2 this also adds React to the list of modules to be installed, but this is no longer the case with npm 3.

    devDependencies ensures React will be installed when you run npm install while developing your component, or when running tests on Travis or similar.

    Putting react in dependencies will cause multiple versions of React to be installed if somebody uses your component but has a different version of React in their own package.json - having multiple versions of React not only bloats the build, but also causes errors when different versions try to interact.

    Reviewed by djbeadle at 2020-03-06 16:45
  • 6. TypeError: _react.default.createElement is not a function

    Hi,

    when we are running tests (with jest) that import @iconify/react, we get the following exception:

    Error: Uncaught [TypeError: _react.default.createElement is not a function]
      at reportException (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
      at innerInvokeEventListeners (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:333:9)
      at invokeEventListeners (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
      at HTMLUnknownElementImpl._dispatch (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
      at HTMLUnknownElementImpl.dispatchEvent (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
      at HTMLUnknownElement.dispatchEvent (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
      at Object.invokeGuardedCallbackDev (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
      at invokeGuardedCallback (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
      at beginWork$1 (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
      at performUnitOfWork (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:22779:12) TypeError: _react.default.createElement is not a function
      at component (/home/kimmob/code/external/jest-iconify-issue/node_modules/@iconify/react/dist/icon.js:640:28)
      at Icon (/home/kimmob/code/external/jest-iconify-issue/node_modules/@iconify/react/dist/icon.js:652:10)
      at renderWithHooks (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:14985:18)
      at mountIndeterminateComponent (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:17811:13)
      at beginWork (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:19049:16)
      at HTMLUnknownElement.callCallback (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
      at HTMLUnknownElement.callTheUserObjectsOperation (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
      at innerInvokeEventListeners (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:318:25)
      at invokeEventListeners (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
      at HTMLUnknownElementImpl._dispatch (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
      at HTMLUnknownElementImpl.dispatchEvent (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
      at HTMLUnknownElement.dispatchEvent (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
      at Object.invokeGuardedCallbackDev (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
      at invokeGuardedCallback (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
      at beginWork$1 (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
      at performUnitOfWork (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:22779:12)
      at workLoopSync (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:22707:5)
      at renderRootSync (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:22670:7)
      at performSyncWorkOnRoot (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:22293:18)
      at scheduleUpdateOnFiber (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:21881:7)
      at updateContainer (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:25482:3)
      at /home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:26021:7
      at unbatchedUpdates (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:22431:12)
      at legacyRenderSubtreeIntoContainer (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:26020:5)
      at Object.render (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:26103:10)
      at /home/kimmob/code/external/jest-iconify-issue/node_modules/@testing-library/react/dist/pure.js:99:25
      at batchedUpdates$1 (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:22380:12)
      at act (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
      at Object.render (/home/kimmob/code/external/jest-iconify-issue/node_modules/@testing-library/react/dist/pure.js:95:26)
      at Object.<anonymous> (/home/kimmob/code/external/jest-iconify-issue/Icon.test.tsx:8:5)
      at Object.asyncJestTest (/home/kimmob/code/external/jest-iconify-issue/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:106:37)
      at /home/kimmob/code/external/jest-iconify-issue/node_modules/jest-jasmine2/build/queueRunner.js:45:12
      at new Promise (<anonymous>)
      at mapper (/home/kimmob/code/external/jest-iconify-issue/node_modules/jest-jasmine2/build/queueRunner.js:28:19)
      at /home/kimmob/code/external/jest-iconify-issue/node_modules/jest-jasmine2/build/queueRunner.js:75:41
      at processTicksAndRejections (internal/process/task_queues.js:97:5)
    
    at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
    
    console.error
    The above error occurred in the <Icon> component:
    
      at Icon (/home/kimmob/code/external/jest-iconify-issue/node_modules/@iconify/react/dist/icon.js:652:10)
    
    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
    

    Have been tracing this issue for quite some time, tried to configure Babel into our jest setup etc, but no luck so far. As a last resort I tested what happens if I rename the folder of the module, from node_modules/@iconify/react to node_modules/@iconify/reacty and updated the imports accordingly. And suddenly the error is gone!

    I created a repo where the issue can be reproduced: https://github.com/aivenkimmob/jest-iconify-issue-repro. Somehow it happens that when this module calls require('react') it ends up resolving to itself. I can't yet explain it but my theory is that react is resolved from the root of @iconify directory, which points to this module.

    tsc --traceResolve tracethis.ts looks correct to me (Module name 'react' was successfully resolved to '/home/kimmob/code/design-system/node_modules/@types/react/index.d.ts' with Package ID '@types/react/[email protected]'.) but that is just the type resolving.

    ======== Resolving module '@iconify/react' from '/home/kimmob/code/design-system/src/components/test.ts'. ========
    Module resolution kind is not specified, using 'NodeJs'.
    Loading module '@iconify/react' from 'node_modules' folder, target file type 'TypeScript'.
    Directory '/home/kimmob/code/design-system/src/components/node_modules' does not exist, skipping all lookups in it.
    Scoped package detected, looking in 'iconify__react'
    Directory '/home/kimmob/code/design-system/src/node_modules' does not exist, skipping all lookups in it.
    Scoped package detected, looking in 'iconify__react'
    Found 'package.json' at '/home/kimmob/code/design-system/node_modules/@iconify/react/package.json'.
    'package.json' does not have a 'typesVersions' field.
    File '/home/kimmob/code/design-system/node_modules/@iconify/react.ts' does not exist.
    File '/home/kimmob/code/design-system/node_modules/@iconify/react.tsx' does not exist.
    File '/home/kimmob/code/design-system/node_modules/@iconify/react.d.ts' does not exist.
    'package.json' does not have a 'typings' field.
    'package.json' has 'types' field 'dist/icon.d.ts' that references '/home/kimmob/code/design-system/node_modules/@iconify/react/dist/icon.d.ts'.
    File '/home/kimmob/code/design-system/node_modules/@iconify/react/dist/icon.d.ts' exist - use it as a name resolution result.
    Resolving real path for '/home/kimmob/code/design-system/node_modules/@iconify/react/dist/icon.d.ts', result '/home/kimmob/code/design-system/node_modules/@iconify/react/dist/icon.d.ts'.
    ======== Module name '@iconify/react' was successfully resolved to '/home/kimmob/code/design-system/node_modules/@iconify/react/dist/icon.d.ts' with Package ID '@iconify/react/dist/[email protected]'. ========
    ======== Resolving module 'react' from '/home/kimmob/code/design-system/node_modules/@iconify/react/dist/icon.d.ts'. ========
    Module resolution kind is not specified, using 'NodeJs'.
    Loading module 'react' from 'node_modules' folder, target file type 'TypeScript'.
    Directory '/home/kimmob/code/design-system/node_modules/@iconify/react/dist/node_modules' does not exist, skipping all lookups in it.
    Directory '/home/kimmob/code/design-system/node_modules/@iconify/react/node_modules' does not exist, skipping all lookups in it.
    Directory '/home/kimmob/code/design-system/node_modules/@iconify/node_modules' does not exist, skipping all lookups in it.
    Found 'package.json' at '/home/kimmob/code/design-system/node_modules/react/package.json'.
    'package.json' does not have a 'typesVersions' field.
    File '/home/kimmob/code/design-system/node_modules/react.ts' does not exist.
    File '/home/kimmob/code/design-system/node_modules/react.tsx' does not exist.
    File '/home/kimmob/code/design-system/node_modules/react.d.ts' does not exist.
    'package.json' does not have a 'typings' field.
    'package.json' does not have a 'types' field.
    'package.json' has 'main' field 'index.js' that references '/home/kimmob/code/design-system/node_modules/react/index.js'.
    File '/home/kimmob/code/design-system/node_modules/react/index.js' exist - use it as a name resolution result.
    File '/home/kimmob/code/design-system/node_modules/react/index.js' has an unsupported extension, so skipping it.
    Loading module as file / folder, candidate module location '/home/kimmob/code/design-system/node_modules/react/index.js', target file type 'TypeScript'.
    File '/home/kimmob/code/design-system/node_modules/react/index.js.ts' does not exist.
    File '/home/kimmob/code/design-system/node_modules/react/index.js.tsx' does not exist.
    File '/home/kimmob/code/design-system/node_modules/react/index.js.d.ts' does not exist.
    File name '/home/kimmob/code/design-system/node_modules/react/index.js' has a '.js' extension - stripping it.
    File '/home/kimmob/code/design-system/node_modules/react/index.ts' does not exist.
    File '/home/kimmob/code/design-system/node_modules/react/index.tsx' does not exist.
    File '/home/kimmob/code/design-system/node_modules/react/index.d.ts' does not exist.
    Directory '/home/kimmob/code/design-system/node_modules/react/index.js' does not exist, skipping all lookups in it.
    File '/home/kimmob/code/design-system/node_modules/react/index.ts' does not exist.
    File '/home/kimmob/code/design-system/node_modules/react/index.tsx' does not exist.
    File '/home/kimmob/code/design-system/node_modules/react/index.d.ts' does not exist.
    Found 'package.json' at '/home/kimmob/code/design-system/node_modules/@types/react/package.json'.
    'package.json' does not have a 'typesVersions' field.
    File '/home/kimmob/code/design-system/node_modules/@types/react.d.ts' does not exist.
    'package.json' does not have a 'typings' field.
    'package.json' has 'types' field 'index.d.ts' that references '/home/kimmob/code/design-system/node_modules/@types/react/index.d.ts'.
    File '/home/kimmob/code/design-system/node_modules/@types/react/index.d.ts' exist - use it as a name resolution result.
    Resolving real path for '/home/kimmob/code/design-system/node_modules/@types/react/index.d.ts', result '/home/kimmob/code/design-system/node_modules/@types/react/index.d.ts'.
    ======== Module name 'react' was successfully resolved to '/home/kimmob/code/design-system/node_modules/@types/react/index.d.ts' with Package ID '@types/react/[email protected]'. ========
    

    Any ideas why this could happen? My suspicion is that jest is doing something with the require mechanics that causes the issue. It only occurs when running through jest.

    Reviewed by kimmobrunfeldt at 2021-02-25 14:03
  • 7. Unexpected token 'export'

    Hi, I'm using nextJS version 10 @iconify/react version 1.1.3 @iconify-icons/fa-solid version 1.1.0

    I'm using iconify with typescript with below sample code

    import React from 'react';
    import { Icon } from '@iconify/react';
    import user from '@iconify-icons/fa-solid/user';
    
    const Sidebar: React.FC = () => {
        return (
            <div>
                <Icon icon={user} />
            </div>
        );
    };
    
    export default Sidebar;
    

    I have this error when nextJS compiles

    SyntaxError: Unexpected token 'export' external%20%[email protected]\fa-solid\user%22 (1:0) @ [email protected]/fa-solid/user module.exports = require("@iconify-icons/fa-solid/user");

    Any idea what I'm doing wrong ?

    Reviewed by fugaku at 2021-01-07 08:55
  • 8. Trying to load some icons in a react typescript app

    I used npm install for iconify and some icon sets, then tried to follow the guide for webpack apps but get stuck with the import and referencing.

    Capture633

    Is there a working sample to review?

    Reviewed by peterennis at 2019-07-17 04:54
  • 9. Error: ENOENT: no such file or directory, open 'C:\ae\iconify-react/dist/icon.js'

    Build fail. Path handling issue with Windows 10.

    C:\ae\iconify-react>npm i
    audited 1398 packages in 2.981s
    found 0 vulnerabilities
    
    
    C:\ae\iconify-react>npm run build
    
    > @iconify/[email protected] build C:\ae\iconify-react
    > node build
    
    fs.js:114
        throw err;
        ^
    
    Error: ENOENT: no such file or directory, open 'C:\ae\iconify-react/dist/icon.js'
        at Object.openSync (fs.js:438:3)
        at Object.writeFileSync (fs.js:1189:35)
        at forEach.filename (C:\ae\iconify-react\build.js:29:12)
        at Array.forEach (<anonymous>)
        at Object.<anonymous> (C:\ae\iconify-react\build.js:20:10)
        at Module._compile (internal/modules/cjs/loader.js:701:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
        at Module.load (internal/modules/cjs/loader.js:600:32)
        at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
        at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! @iconify/[email protected] build: `node build`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the @iconify/[email protected] build script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\peter\AppData\Roaming\npm-cache\_logs\2019-07-15T04_54_03_225Z-debug.log
    
    C:\ae\iconify-react>
    
    Reviewed by peterennis at 2019-07-15 04:56
  • 10. does not forward the ref

    I should get the svg dom element in the ref.

    Demo:

    https://9ghol.csb.app/

    index.js:27 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
    
    Check the render method of `App`.
        at Icon$1 (https://9ghol.csb.app/node_modules/@iconify/react-with-api/dist/icon.esm.js:2054:10)
        at div
        at App (https://9ghol.csb.app/src/App.js:24:34)
    
    Reviewed by hrasoa at 2021-01-25 19:09
  • 11. Bump lodash from 4.17.14 to 4.17.19

    Bumps lodash from 4.17.14 to 4.17.19.

    Release notes

    Sourced from lodash's releases.

    4.17.16

    Commits
    Maintainer changes

    This version was pushed to npm by mathias, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2020-07-17 04:51
  • 12. Support for react native

    Is it possible to use it for react native?

    Till now theres is the following error Invariant Violation: View config not found for name svg. Make sure to start component names with a capital letter.

    thanks.

    Reviewed by bergersens at 2019-11-28 12:46
React icon component for Geomicons Open

react-geomicons React icon component for Geomicons Open View Demo Getting Started npm install --save react-geomicons var React = require('react'); var

Jan 27, 2022
React FontIconPicker Component to pick icon or SVG from a selection.
React FontIconPicker Component to pick icon or SVG from a selection.

React FontIconPicker Component A react version of fontIconPicker. This is rewritten and is not a wrapper around jQuery version. With FontIconPicker co

May 10, 2022
An svg icon from clipboard.js site assets, packaged as a React stateless component
An svg icon from clipboard.js site assets, packaged as a React stateless component

react-clipboard-icon is an svg icon from clipboard.js site assets, packaged as a React stateless component Installation | Usage | Development | Licens

Mar 26, 2019
svg react icons of popular icon packs

React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons

May 17, 2022
Transform SVG to React Chakra UI
Transform SVG to React Chakra UI <Icon /> ✨

Transform SVG to React Chakra UI ✨ from SVG file to CODE Features Transform <SVG/> to Chakra-UI Icon Component or Functional createIcon(...). <Icon />

May 9, 2022
A desktop icon manager application
A desktop icon manager application

Gerenciador de ícones ⬇ Downloaded Images Pode baixar o executável aqui ⚔ Features Diversas bibliotecas de ícones Pesquisar por ícones Mudar a cor dos

Apr 5, 2022
57 SVG icons for CRUD applications, packaged as a React component with light & dark themes and tooltip.
57 SVG icons for CRUD applications, packaged as a React component with light & dark themes and tooltip.

React-CRUD-Icons · React-CRUD-Icons is a set of SVG icons for CRUD (Create, Read, Update, Delete) apps, implemented as a React component with light &

Apr 10, 2022
🌈 React component for Iconly icons

?? React Iconly Icons React component for Iconly icons react-iconly is a collection of simply beautiful open source icons for React.js. Each icon is d

May 10, 2022
React component for font awesome
React component for font awesome

react-icon React component for font awesome Installation npm install sitb-react-icon Usage Dependencies Depend on the style of the font-awesome libra

Oct 23, 2017
Font Awesome React component

react-fontawesome Font Awesome 5 React component using SVG with JS Documentation How to Help Contributors Releasing this project (only project owners

May 10, 2022
A React.js wrapper component to animate the line stroke in SVGs
A React.js wrapper component to animate the line stroke in SVGs

react-mt-svg-lines Bring your SVGs to life Live Demo A React.js wrapper component that lets you trigger an "animated lines" effect within your SVGs by

Feb 11, 2022
A small and simple component to create icons from a rating
A small and simple component to create icons from a rating

Pretty rating React A small and simple library that transform you rating in icons for you web Status Getting started To install as npm dependency npm

Nov 13, 2021
SVG library for React Native, React Native Web, and plain React web projects.
SVG library for React Native, React Native Web, and plain React web projects.

react-native-svg react-native-svg provides SVG support to React Native on iOS and Android, and a compatibility layer for the web. Check out the demo L

May 12, 2022
ICONSAX for React and React Native ✌️

ICONSAX for React and React Native ✌️

May 9, 2022
React-useanimations is a collection of free animated open source icons for React.js.
React-useanimations is a collection of free animated open source icons for React.js.

React UseAnimations Icons What is react-useanimations? React-useanimations is a collection of free animated open source icons for React.js. Collection

May 15, 2022
SVG Vue/React components integrated from fluentui-system-icons, ionicons, ant-design-icons, material-design-icons, Font-Awesome, tabler-icons and carbon icons. (Vue3, Vue2, React, SVG)

SVG Vue/React components integrated from fluentui-system-icons, ionicons, ant-design-icons, material-design-icons, Font-Awesome, tabler-icons and carbon icons. (Vue3, Vue2, React, SVG)

May 12, 2022
A React SVG components library of Framework7 Icons with better usability.
A React SVG components library of Framework7 Icons with better usability.

A React SVG components library of Framework7 Icons > npm install react-f7-icons import F7Icon from 'react-f7-icons' export default function Component

Sep 9, 2021
A friendly, open source React iconset
A friendly, open source React iconset

A friendly, open source React iconset

May 8, 2022