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

Last update: May 2, 2022
react simple icons

react-simple-icons

This package provides a React component for simple-icons.

www.npmjs.com! builds! downloads licence

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

TypeScript Support

Usage

You can use simpleicons.org to find a specific icon. Then, you can import the icon from simple-icons and use it with the Icon component:

import siReact from 'simple-icons/icons/react';
import Icon from '@icons-pack/react-simple-icons';

function BasicExample() {
  return <Icon icon={siReact} color="#61DAFB" size={24} />;
}

Demo

Edit codesandbox

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 'simple-icons/icons/react';
import Icon from '@icons-pack/react-simple-icons';

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

Custom styles

import siReact from 'simple-icons/icons/react';
import Icon from '@icons-pack/react-simple-icons';

// title default "React"
function CustomStyles() {
  return <Icon icon={siReact} className="myStyle" />;
}
.myStyle {
  width: 35px;
  height: 35px;
}

GitHub

https://github.com/icons-pack/react-simple-icons
Comments
  • 1. 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

    Reviewed by BlackBearFTW at 2021-07-21 09:36
  • 2. 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 ;)

    Reviewed by pomali at 2020-04-08 19:10
  • 3. 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.

    Reviewed by alinnert at 2020-02-17 10:44
  • 4. 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).

    Reviewed by sachinraja at 2021-08-10 00:27
  • 5. breaking: export only one component that accepts an icon object

    closes #110, closes #116

    see discussion in #110

    I updated the README, but @wootsbot will have to update his codesandbox demo. I did not update the changelog.

    Reviewed by sachinraja at 2021-09-20 23:15
  • 6. 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" />
    
    Reviewed by pawelmalak at 2021-09-18 10:53
  • 7. build(deps): bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    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 2022-05-12 01:04
  • 8. build(deps): bump semver-regex from 3.1.2 to 3.1.3

    Bumps semver-regex from 3.1.2 to 3.1.3.

    Commits

    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 2022-05-12 00:57
  • 9. build(deps): bump tar from 6.1.0 to 6.1.11

    Bumps tar from 6.1.0 to 6.1.11.

    Commits
    • e573aee 6.1.11
    • edb8e9a fix: perf regression on hot string munging path
    • a9d9b05 chore(test): Avoid spurious failures packing node_modules/.cache
    • 24b8bda fix(test): use posix path for testing path reservations
    • e5a223c fix(test): make unpack test pass on case-sensitive fs
    • 188badd 6.1.10
    • 23312ce drop dirCache for symlink on all platforms
    • 4f1f4a2 6.1.9
    • 875a37e fix: prevent path escape using drive-relative paths
    • b6162c7 fix: reserve paths properly for unicode, windows
    • Additional commits viewable in compare view

    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 2022-05-12 00:55
  • 10. build(deps): bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    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 2022-05-12 00:54
  • 11. 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.

    Reviewed by calebpdx at 2021-07-12 06:57
  • 12. May you can change to

    Hi there :wave:

    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/[email protected]/icons/${icon}.svg`} />
        );
    };
    // ... exports
    

    :thinking:

    Reviewed by miko-github at 2021-04-22 18:42
  • 13. Components and README not UpperCamelCase

    Reviewed by Hahlh at 2020-12-13 09:36
  • 14. 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.

    Reviewed by jooola at 2020-03-07 02:10
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
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
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
Akar icons library as React components.
Akar icons library as React components.

akar-icons A perfectly rounded icon library made for designers, developers, and pretty much everyone. Explore all of our icons at akaricons.com. Get S

May 4, 2022
Bytesize Icons as React Components.

Bytesize icons as React components. All the icons were designed by Dan Klammer. Find the original SVG icons here. How to install? npm install --save r

Apr 9, 2022
React Material Design Icons – built with Pixo, Styled Components, and Styled System

React Material Design Icons Built with Pixo, Styled Components, and Styled System https://jxnblk.com/rmdi npm i rmdi // import icons individually for

Dec 31, 2021
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
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 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
🌈 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
🎨 Tabler Icons for React

tabler-icons-react A library of React components for Tabler Icons — a set of over free 700 open-sourced MIT-licensed icons. Usage The package is avail

May 13, 2022
svg social icons in react
svg social icons in react

react-social-icons A set of beautiful svg social icons. Easily used in React. No images or external css dependencies. Svg paths provided by Squarespac

May 4, 2022
Free “do wtf you want with” pixel-perfect icons.
Free “do wtf you want with” pixel-perfect icons.

Iconic is a free “do wtf you want with” set of pixel-perfect icons. Available as basic SVG icons and via first-party React and Vue libraries. Browse a

Apr 10, 2022
SVG icons for Ocean DS

Ocean Icons This project is composed of many npm packages for building icons to the Ocean design-system. Installation yarn add @useblu/ocean-icons-rea

Apr 28, 2022
A Free Set of Sketchy Illustrations provided by opendoodles
A Free Set of Sketchy Illustrations provided by opendoodles

Welcome to react-open-doodles ?? A Free Set of Sketchy Illustrations provided by opendoodles Open Doodles was created by Pablo Stanley we use this Ill

Mar 29, 2022
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
Iconify icon component for React

This repository contains old version 1 of Iconify for React. The latest version has been moved to Iconify monorepo: https://github.com/iconify/iconify

May 7, 2022
A friendly, open source React iconset
A friendly, open source React iconset

A friendly, open source React iconset

May 8, 2022