alexanderschau/react-ionicons

⚡ A simple Ionicons 💡 React implementation with Typescript support.

Ionicons React Component

This package contains a React Component, which implements the latest version of the official Ionicons into React.

Installation 📦

To add the package to your existing React project just type in one of the following commands:

npm i @reacticons/ionicons

or

yarn add @reacticons/ionicons

Usage

import React from 'react';
import IonIcon from '@reacticons/ionicons';

export const Component = () => (
  <>
    <IonIcon name="bag-outline" />
  </>
);

Custom Size

You can specify the icon size by using the optional size prop.

<IonIcon name="bag-outline" size="small" />
<IonIcon name="bag-outline" size="large" />

Supported Icons

This package supports all Ionicons of the matching version. To see a full list of them, you can take a look at the official Ionicons website.

Hint

By the way, the <IonIcon> Component has the same attributes as a typical <span> element.

react-ionicons's Issues

Minified React Error on V7+

I have a minified error when build app production.

I am using latest versions of tools of React:

    "@vitejs/plugin-react-swc": "^3.0.0",
    "typescript": "^5.0.4",
    "vite": "^4.2.1"

Obs: 6.1.1 version works fine.

Error:

dex-e7c5bba4.js:40 Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

New prop request `size`

@alexanderschau, your package really saved our time but we have a small request.
Is it possible to add size prop to the component?

https://ionic.io/ionicons/usage

Package.json causing issues with Webpack v5

Hi! I'm running into an issue as I try to upgrade to webpack v5 from v4.

I keep getting an error related to the @reacticons/iconicons package. The error is:

Module not found: Error: Package path . is not exported from package

I have been having a dig and I can see that in your package.json you are defining both main and exports to let consumers know where to do the root level imports from. I had a look at the npm docs and it states the following about exports:

It is supported in Node.js 12+ as an alternative to the "main" that can support defining subpath exports

If I modify the package.json directly in my node_modules folder and remove the exports property, my project builds fine. Is there a specific reason you added the exports along with the main property as it seems like only main is needed and webpack doesn't like both being defined.

Thanks!

ReferenceError: module is not defined in ES module scope.

ReferenceError: module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/node_modules/@reacticons/ionicons/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

A few icons not rendering correctly?

Hi @alexanderschau , we've recently found a couple of small inconsistencies between how a few of the icons are rendered when compared to how they look on the ionic website. I created a super quick example here on codesandbox: https://codesandbox.io/s/festive-lovelace-vq9yqp?file=/src/App.tsx

Here are those three previewed from the ionic website directly:

I'm not sure if there are more than this too but those are the three we stumbled across.

It would be awesome if you could take a look to see what might be happening here?

Thanks for your help!

Using another container element other than a div

Hey, it would be useful if you could specify a different container element for the svg icon. <div> is not a valid child component of <p> / <span> and many more, meaning HTML will not pass validation checks, and also means react logs warnings about this. An icon is something we would ideally want to use anywhere in our markup without this restriction.

I'm happy to have a go at this and create a PR, but would be useful if you could give me an idea of how difficult (or maybe easy) it might be to do this.

Thanks.