icons-pack / react-simple-icons

📦 This package provides the Simple Icons packaged as a set of React components.

react-simple-icons

This package provides the Simple Icons 11.7.0 packaged as a set of React components.

Installation

Install the package in your project directory with:

// with yarn
yarn add @icons-pack/react-simple-icons

// with npm
npm add @icons-pack/react-simple-icons

// with pnpm
pnpm add @icons-pack/react-simple-icons

// with bun
bun add @icons-pack/react-simple-icons

TypeScript Support

Usage

You can use simpleicons.org to find a specific icon. When importing an icon, keep in mind that the names of the icons are upperCamelCase , for instance:

• Material Design is exposed as { SiMaterialdesign } from @icons-pack/react-simple-icons
• azure devOps is exposed as { SiAzuredevops } from @icons-pack/react-simple-icons

Demo

Edit codesandbox

Basic example

import { SiReact } from '@icons-pack/react-simple-icons';

function BasicExample() {
  return <SiReact color='#61DAFB' size={24} />;
}

Change title

@icons-pack/react-simple-icons provides a default title referring to the component name

The <title> element provides an accessible, short-text description of any SVG container element or graphics element.

import { SiReact } from '@icons-pack/react-simple-icons';

// title default "React"
function ChangeTitle() {
  return <SiReact title='My title' color='#61DAFB' size={24} />;
}

Use default color

Set color as default to use the default color for each icon

import { SiReact } from '@icons-pack/react-simple-icons';

function DefaultColorExample() {
  return <SiReact color='default' size={24} />;
}

Use default color as hex

Append Hex to the icon name to use the default color as hex string

import { SiReact, SiReactHex } from '@icons-pack/react-simple-icons';

function DefaultColorExample() {
  return <SiReact color={SiReactHex} size={24} />;
}

Custom styles

import { SiReact } from '@icons-pack/react-simple-icons';

function CustomStyles() {
  return <SiReact className='myStyle' />;
}

.myStyle {
  width: 35px;
  height: 35px;
}

react-simple-icons's Issues

Dynamic import by icon slug

Hi, is it possible to import needed icons dynamically using icon slug?

I have this component:

interface Props {
  title: string;
  icon: string;
}

export const BadgeWithIcon = (props: Props): JSX.Element => {
  return (
    <span className='badge bg-primary'>
      {/* ICON */}
      {props.title}
    </span>
  );
}

and I want to insert icon dynamically like that:

<BadgeWithIcon title="ReactJS" icon="reactjs" />

Error: EMFILE: too many open files

Description

Getting the following error when deploying on Vercel importing any icon.

[Error: EMFILE: too many open files, open '/var/task/vercel/path0/node_modules/.pnpm/@[email protected][email protected]/node_modules/@icons-pack/react-simple-icons/icons/SiGooglecloudcomposer.mjs'] {
  errno: -24,
  code: 'EMFILE',
  syscall: 'open',
  path: '/var/task/vercel/path0/node_modules/.pnpm/@[email protected][email protected]/node_modules/@icons-pack/react-simple-icons/icons/SiGooglecloudcomposer.mjs'
}

I have not imported SiGooglecloudcomposer anywhere.
Related issues:

• phosphor-icons/react#45
• lucide-icons/lucide#1446
• lucide-icons/lucide#1457

I am using Astro, so I cannot use the Next.js fix. My current workaround is importing the desired icons as follows:

import {
  default as SiPython,
  defaultColor as SiPythonHex
} from "@icons-pack/react-simple-icons/icons/SiPython.mjs";

EDIT here's another workaround:

<svg aria-label="Github logo" viewBox="0 0 24 24" height={12} width={12}>
  <path d={siGithub.path} />
</svg>

Repro

npm create astro@latest
npx astro add react
npm install @icons-pack/react-simple-icons
Add an icon to the home page
Deploy to vercel using '@astrojs/vercel/serverless' https://docs.astro.build/en/guides/deploy/vercel/#adapter-for-ssr

Use Dependabot to keep simple-icons up to date

The simple-icons dependence has been outdated for a while.

We could use a bot to keep our package up to date. For example the Dependabot.

May you can change to

Hi there 👋

you can only create one component which use as cdn from readme

so,

// usage
<SimpleIcons icon="[ICON SLUG]" ...otherAttrs />

// only for example
const SimplyIcons = ({ icon, ...other }) => {
    return (
        <img height={height} width={width} src={`https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/${icon}.svg`} />
    );
};
// ... exports

🤔

Create landing page for demo

Export `IconType` to allow use outside of the package

Currently, IconType is not publicly accessible since it is not re-exported in index.d.ts. The type can be useful for creating custom icons that are currently not available in Simple Icons but are compatible with the package.

diff --git a/node_modules/@icons-pack/react-simple-icons/index.d.ts b/node_modules/@icons-pack/react-simple-icons/index.d.ts
index b3bfab2..899e67a 100644
--- a/node_modules/@icons-pack/react-simple-icons/index.d.ts
+++ b/node_modules/@icons-pack/react-simple-icons/index.d.ts
@@ -2732,3 +2732,4 @@ export { default as SiZorin, defaultColor as SiZorinHex } from './icons/SiZorin'
 export { default as SiZotero, defaultColor as SiZoteroHex } from './icons/SiZotero';
 export { default as SiZulip, defaultColor as SiZulipHex } from './icons/SiZulip';
 export { default as SiZyte, defaultColor as SiZyteHex } from './icons/SiZyte';
+export type * from "./types"
\ No newline at end of file

Material icons package

It would be awesome to provide a package with material icons as svg icons.

See https://material.io/resources/icons/?style=baseline

Feature Request: Add Export for Default Icon Colors

Currently, it would be extremely helpful to have the option to import the default hex color of an icon. This feature could be really useful for creating more dynamic and appealing interfaces. Rather than manually obtaining the hex codes from the Simple Icons website, I would like a feature that automatically exports the hex color value. Something like:

import { SiReact, SiReactHex } from '@icons-pack/react-simple-icons';

function BasicExample() {
  return (
    <Button color={SiReactHex} />
      <SiReact />
      React Button
    </Button>
  );
}

I'm not sure if this could be useful for more users, but in my project we use it a lot. Also, I don't know the negative impact (maybe the lib size)

Can tree shaking be improved for named imports?

If I import

import { Github } from "@icons-pack/react-simple-icons";

webpack packs whole library (2MB+).

If i import only one file

import  Github  from "@icons-pack/react-simple-icons/lib/Github";

only icon I need (few kB).

I would expect for named imports to get tree shaken and pack only files that are needed.

Thanks for the lib, btw ;)

Default Icon Color

Simple Icons exposes hex which is the default color of any icon.

This color is currently not exposed to the users of this package and there is no way to retrieve it.

I would like to propose supporting something like <ReactJs color size={24} /> which will fill the svg with the default hex color.

onPointerEnterCapture Errors

I am getting errors from the IconType stating onPointerEnterCapture and onPointerLeaveCapture are missing. But when I try to add an empty handler I receive DOM errors:

app-index.js:33 Warning: Unknown event handler property `onPointerEnterCapture`. It will be ignored.
    at svg
    at SiX2 (webpack-internal:///(app-pages-browser)/../../node_modules/@icons-pack/react-simple-icons/icons/SiX.mjs:12:11)
    at button
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/@radix-ui/themes/dist/cjs/components/base-button.js:32:19)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/@radix-ui/themes/dist/cjs/components/icon-button.js:32:22)

My default is to always assume I am doing something wrong... ?

But this is really weird, anyone seen this before?

Components and README not UpperCamelCase

Good day!

First of all, thank you for maintaining this package!

The README states:

I am a little confused, as I wouldn't consider capitalizing only the first letter to be UpperCamelCase.
Should the description be changed or the component names be corrected?

Two sources about UpperCamelCase:
https://wiki.c2.com/?UpperCamelCase
https://en.wikipedia.org/wiki/Camel_case

Failed to install if repository has React 17 installed on npm v7

• Node.js: 16.0.0
• npm: 7.11.2
• React: 17.0.2

I got this problem when installing this package on React 17:

$ npm i @icons-pack/react-simple-icons
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from @icons-pack/[email protected]
npm ERR! node_modules/@icons-pack/react-simple-icons
npm ERR!   @icons-pack/react-simple-icons@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/tkesgar/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/tkesgar/.npm/_logs/2021-05-24T15_25_33_095Z-debug.log

npm v7 installs peer dependencies by default, but

To fix this, adding ^17 should suffice:

  "peerDependencies": {
    "react": "^16.8 || ^17"
  },

react-feather is doing that.

As a workaround, I can install without installing the peer dependencies:

$ npm i @icons-pack/react-simple-icons --legacy-peer-deps

Version 5.1 Husky error

Hey,

As in the title, I noticed this latest commit / version produces a husky error.

npm ERR! code 1
npm ERR! path C:\Users\path\to\repot\node_modules@icons-pack\react-simple-icons
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c husky install
npm ERR! 'husky' is not recognized as an internal or external command,
npm ERR! operable program or batch file.

this is not present in 5.0.0
I have my .git in a parent folder which I believe is impacting this issue,

Create common utils package

In order to add more icons packages, the project need to share some code.

I suggest to create a @icons-pack/common package and share most of the code.

automatically stay up to date with simple-icons

Automatically staying up to date would allow users to use new icons as soon as they come out. I believe this is easily possible with renovate, which can automerge. You could also use a GitHub Actions cron job to update simple-icons, push a commit, and build and publish the package (this is what I do for the python wrapper).

Is there a way to get icon component by specific enum name?

Hi, Is there a way to get icon component by specific enum name?

 <Fragment>
    {getSpecificIcon("react")}
  </Fragment>

or 

 <Fragment>
    <SpecificIcon name="react" {...props} />
  </Fragment>

v6.2.0 to v6.3.0 breaks all icon references

All icons were renamed from Discord to Sidiscord for example.
This should've been a major version increment if intentional, not a minor one.

v6.2.0...v6.3.0

Provide TypeScript types

Can you also provide TypeScript types? I want to use Simple Icons in a TS + React app but it doesn't compile (with strict settings) because of the missing types.

I think it makes most sense to automatically generate the icons and their types in one go.

Move to esbuild

Our current npm run build takes too long time.

We could use esbuild instead of rollup + terser.

References

• https://esbuild.github.io

`missing the following properties`

Type '{ size: number; }' is missing the following properties from type 'Pick<SVGProps<SVGSVGElement>, "string" | "children" | "className" | "style" | "clipPath" | "filter" | "mask" | "path" | "onChange" | "color" | "height" | ... 458 more ... | "key">': onPointerEnterCapture, onPointerLeaveCapturets(2739)

Has anyone ever seen Typescript complains like that before ? All i'm doing is:

<SiEthereum size={16} />

Generic icon component with type property.

I would like to have a dynamic icon component that I can use for my card component, this way I can just pass an argument of type Icon to my card component and then use that parameter to load that icon.

For example:
<Icon type={platformIcon} size={25} />

platformIcon would be a variable that holds an icon, like ReactJs, which then would become <Icon type="ReactJS" size="25" />

I currently see no way to have an icon component be dynamic, could this be added?

Edit: I know I could do this myself, but that would require me to import ALL the icons first

Icons in `any` instead of `IconType`

As the title suggests, all icons are currently in any type instead of the defined IconType. Properly because it's missing a .d.ts file for each icon.

"SyntaxError: ambiguous indirect export" when importing any icons or colors

When I try to import any icon or color from react-simple-icons, I get the following error:

Uncaught SyntaxError: ambiguous indirect export: SiApple

(Or whatever I'm trying to import, of course). No stack trace is provided, just the line number in my code where I import the module.

This is a new issue after upgrading from 6.x to 9.x. The indirect export mention leads me to think that this is related to the indirect exports in the index.ts, possibly something to do with the naming being updated between these versions?

I'm using React 18 with Vite 4.0.4. Let me know if there's any other info I can provide.

Typescript: Unable to add className prop

Hello!

Since the upgrade to version 5, I am unable to specify a className prop on the icons. Although it still technically works, it does cause a typescript error.

Example:

import { Github } from "@icons-pack/react-simple-icons";

<Github className="mr-2 w-5 h-5" /> Sign in with Github

There are a few ways that this could be handled. Either you could extend the SVG props as defined by React, or create a shared interface that all of the icons extend (if you want more control over what props users should pass through).

I'm happy to assist in any way, just let me know what course of action you prefer to take.

v5.2.0 tree shaking doesn't work as intended

I've been using this library for a long time and I'm very thankful for your work!

I've recently updated to v5.2.0 and tree shaking is now broken. I saw this issue #32 but I guess something must've changed since v3.

This is how I'm importing the icons:

import { Facebook, Instagram, Twitter } from "@icons-pack/react-simple-icons";

It's a Next.js application with Typescript. Below you can see a before and after in bundle size:

No icons:

Page                                       Size     First Load JS
┌ ● /                                      811 B           129 kB
...

With icons:

Page                                       Size     First Load JS
┌ ● /                                      811 B          1.68 MB
...

[RFC] Adding a default classname to all icons

There are use cases where I wish to apply global styles to all icons. e.g. when integrating it with a UI component library, such that I can make use of the design tokens provided by the library to style the icons. For this, it will be much simpler if all the icons by default have a class name applied.

I believe it can be easily achieved at https://github.com/icons-pack/react-simple-icons/blob/main/src/base.tsx#L20.

e.g.

<svg
  // rest of the props...
  className={`react-simple-icons ${className}`}
  {...others}
>

Add documentation to npm

Update Simple Icons Version

From the next major release of simple-icons (v11, releasing on May 26, 2024), We will begin removing third-party extensions from our README list that are not up to date with at least the previous major release.
For example, when v11 is released, we will remove any extensions that don't support v10.0.0 or higher.

How do I keep my package up to date?

There are two methods that prove most popular among other maintainers. It is up to you which you implement.

Using @latest from a CDN

Projects that use the CDN version of the project (jsDelivr/unpkg) can keep up to date simply by changing the version number in their code to @latest. That way - you're always using the most up to date version of the icon package.

Running a weekly CRON

Many of our third party contributors make use of GitHub actions, and a weekly CRON job to query that the version number of the main package has changed, and then update and build their own package. A great example of this is the DrawIO package by mondeja. The main package is released consistently on a Sunday - so we recommend running your CRON job on a Monday or Tuesday.

---

When you've got your extension running one of the above methods, drop us a Pull Request to update your version number on the README.

If you're in need of any support in implementing one of the above - please feel free to start a discussion or ask us on Discord.

Missing files in package

I installed the package and immediately came across a file to compile error.

I first removed the package and readded it with the same error. After further inspection, it seems that there are no files beyond the changelog, license, package.json, and readme.md.