Neurological Phenomenon Multiplexer
    Wondering what’s next for npm?Check out our public roadmap! »

    @icons-pack/react-simple-icons
    TypeScript icon, indicating that this package has built-in type declarations

    4.2.0 • Public • Published
    react simple icons

    react-simple-icons

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

    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. When importing an icon, keep in mind that the names of the icons are upperCamelCase , for instance:

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

    These are some exceptions to this rule:

    • 500px is exposed as { FiveHundredPx } from @icons-pack/react-simple-icons
    • c++ is exposed as { Cplusplus } from @icons-pack/react-simple-icons
    • .Net is exposed as { DotNet } from @icons-pack/react-simple-icons
    • D3.js is exposed as { D3DotJs } from @icons-pack/react-simple-icons
    • dev.to is exposed as { DevDotTo } from @icons-pack/react-simple-icons
    • webcomponents.org is exposed as { WebcomponentsDotOrg } from @icons-pack/react-simple-icons
    • X.Org is exposed as { XDotOrg } from @icons-pack/react-simple-icons
    • FerrarinDotVDot is exposed as { FerrarinDotVDot } from @icons-pack/react-simple-icons

    Demo

    Edit codesandbox

    Basic example

    import { ReactJs } from '@icons-pack/react-simple-icons';
    
    function BasicExample() {
      return <ReactJs 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 { ReactJs } from '@icons-pack/react-simple-icons';
    
    // title default "React"
    function ChangeTitle() {
      return <ReactJs title="My title" color="#61DAFB" size={24} />;
    }

    Custom styles

    import { ReactJs } from '@icons-pack/react-simple-icons';
    
    // title default "React"
    function CustomStyles() {
      return <ReactJs className="myStyle" />;
    }
    .myStyle {
      width: 35px;
      height: 35px;
    }

    Install

    npm i @icons-pack/react-simple-icons

    DownloadsWeekly Downloads

    1,857

    Version

    4.2.0

    License

    MIT

    Unpacked Size

    11.1 MB

    Total Files

    1887

    Last publish

    Collaborators

    • avatar