React icon component for Geomicons Open

Last update: Jan 27, 2022

react-geomicons

Build Status

React icon component for Geomicons Open

View Demo

Getting Started

npm install --save react-geomicons
var React = require('react');
var Icon = require('react-geomicons');

module.exports = React.createClass({
  render: function() {
    <MyComponent>
      <Icon name="bookmark" />
    </MyComponent>
  }
});

Props

React-geomicons passes all props to the SVG element, in addition to the following:

  • name - camel cased icon name
  • size - sets width and height attributes. default 1em (inherits size from parent element)
  • fill - default currentColor (inherits color from parent element)

See Geomicons Open for the list of available icons.

MIT License

GitHub

https://github.com/jxnblk/react-geomicons/
Comments
  • 1. Unknown prop `dataId` (library problem)

    This seems to be an internal error with React Geomicons. I was rendering with static-react and from this code:

    <Icon name='clock' fill='#758a99' />
    

    I got this error:

    Warning: Unknown prop `dataId` on <svg> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
        in svg (created by Icon)
    

    (it went on to trace the Icon component up through the DOM hierarchy)

    Looks like the dataId prop causing an issue is here: https://github.com/jxnblk/react-geomicons/blob/master/src/geomicon.js#L19

    @jxnblk if you could take a look at this, that’d be great :wink:

    Reviewed by lachlanjc at 2016-07-06 04:14
  • 2. Website appears to be down

    Hi Brent,

    I don't post issues often so if I'm formatting this wrong please let me know. The website for react-geomicons appears to be experiencing an error https://jxnblk.com/bundle.js. Just FYI

    Reviewed by theednaffattack at 2019-08-06 20:09
  • 3. Change background color of icons

    any idea on how to do this? fill only seems to be associated with the empty space. your demo shows that you can change the background color somehow.

    I tried overriding it but no dice. Any pointers?

    Reviewed by anthonychung14 at 2016-05-18 21:27
  • 4. Support new versions of React that don't include PropTypes in the React package

    There's at least one fork that's doing this: https://github.com/modsy/react-geomicons

    However, looks like they're adding semicolons in places you normally don't.

    Reviewed by markmiro at 2019-01-16 20:15
  • 5. Use the prop-types package from npm instead of the PropTypes from the…

    … main React package, which is deprecated. This will avoid warnings when using react-geomicons in your projects.

    Also amended the .gitignore package that did not contain entries for node_modules and a few other, common ignored files and directories.

    Reviewed by mvilrokx at 2017-05-14 22:38
Accessible SVG icon component for React

react-svg-icon Accessible SVG icon component for React. Check out the online demo! Usage npm install --save react-svg-icon import Icon from 'react-svg

Jan 9, 2020
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
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
A friendly, open source React iconset
A friendly, open source React iconset

A friendly, open source React iconset

May 8, 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
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