npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-tech-icons

v1.6.2

Published

React package that contains the best Language, Framework, and Library Icons!

Downloads

30

Readme

React Tech Icons

Elevate Your React Projects with a Treasury of Tech Icons

  • Dive into the world of endless possibilities for your React projects with React Tech Icons!
  • This comprehensive npm package offers a vast collection of meticulously crafted SVG icons representing various cutting-edge technologies.
  • Seamlessly import and integrate these dynamic icons into your React applications, effortlessly adding visual appeal and clarity to your interfaces.
  • From programming languages to software tools, discover an extensive library that empowers you to visually communicate complex tech concepts with ease.
  • Embrace creativity and enhance your UI/UX design effortlessly with React Tech Icons!

Install package

Lastest

# npm
npm install react-tech-icons@latest

# yarn
yarn add react-tech-icons@latest

# pnpm
pnpm add react-tech-icons@latest

IMPORTANT

adding a color to a icon has to be done in one of these formats:

  • rgb(r, g, b)
  • rgb(r, g, b, a)
  • hsl(h, s%, l%)
  • #nnn
  • #nnnnnn

Default Icon Usage

import React from 'react';
import { C } from 'react-tech-icons';

export default function YourComponent() {
  return <C />;
}

Change The Icon Size

import React from 'react';
import { JS } from 'react-tech-icons';

export default function YourComponent() {
  return (
    <div>
      <JS heigth={30} width={30} />
    </div>
  );
}

ChangeLog

  • v1.6.1 Reduced package size!
  • v1.6.0 Added 16 more icons!
  • v1.5.1 Fixed icon default size!
  • v1.5.0 Added 23 more!
  • v1.4.2 Fixed broken repo link!
  • v1.4.1 Added default size that will be modifiable soon, and fixed some markup errors!
  • v1.3.1 Added 22 more!
  • v1.2.1 Added 26 more icons!
  • v1.1.2 Added types and icon customization
  • v1.1.1 Added 10 new icons
  • v1.0.0 Initial launch of react-tech-icons

Author

Note: All brand icons are trademarks of their respective owners. The use of these trademarks does not indicate endorsement of the trademark holder by the author, nor vice versa.

This is my first npm package so if you enjoy it or have anything to say please let me know here [email protected]!