🎨 GCP Desechar Icons Library

A lightweight, tree-shakeable React icon library with popular brand icons for web developers

✨ Features

• 🎯 Tree-shakeable - Only bundle the icons you use
• ⚡ Lightweight - Optimized SVGs for minimal bundle size
• 🎨 Customizable - Control size, color, and all SVG props
• 📦 TypeScript - Full TypeScript support with type definitions
• ⚛️ React - Built for React 17, 18, and 19

📦 Installation

npm install gcp-desechar-icons-library

🚀 Usage

// Import from main entry (all icons)
import { ReactIcon, SunIcon } from 'gcp-desechar-icons-library';

// Or import by category
import { ReactIcon, NextjsIcon } from 'gcp-desechar-icons-library/brands';
import { SunIcon, MoonIcon } from 'gcp-desechar-icons-library/ui';

function App() {
  return (
    <div>
      <ReactIcon size={32} color="#61dafb" />
      <NextjsIcon size={32} />
      <SunIcon size={24} />
    </div>
  );
}

🎨 Available Icons

Frontend Frameworks & Libraries

ReactIcon • VueIcon • AngularIcon • NextjsIcon • SvelteIcon • AstroIcon • RemixIcon

Styling & UI

TailwindIcon • SassIcon • BootstrapIcon • StyledComponentsIcon • Html5Icon • Css3Icon • FigmaIcon

Languages

TypescriptIcon • JavascriptIcon • PythonIcon

Backend & Databases

NodejsIcon • ExpressIcon • NestjsIcon • GraphqlIcon • PostgresqlIcon • MongodbIcon • MysqlIcon

DevOps & Tools

DockerIcon • GitIcon • GithubIcon • AwsIcon • GoogleCloudIcon • ViteIcon • JestIcon

Social

FacebookIcon • InstagramIcon • WhatsappIcon • YoutubeIcon • XIcon • TelegramIcon • GoogleIcon

UI Icons

SunIcon • MoonIcon

⚙️ Props

All icons accept the following props:

| Prop | Type | Default | Description | | ---------- | ------------------ | ---------------- | ---------------------------- | | size | number \| string | 24 | Icon size (width and height) | | color | string | "currentColor" | Icon color | | ...props | SVGProps | - | Any valid SVG attribute |

Examples

// Basic usage
<ReactIcon />

// Custom size
<ReactIcon size={48} />
<ReactIcon size="3rem" />

// Custom color
<ReactIcon color="#61dafb" />
<ReactIcon color="red" />

// With className
<ReactIcon className="my-icon" />

// With inline styles
<ReactIcon style={{ margin: '10px' }} />

// With event handlers
<ReactIcon onClick={() => console.log('clicked')} />

// All props combined
<ReactIcon
  size={32}
  color="#61dafb"
  className="tech-icon"
  onClick={handleClick}
  aria-label="React framework"
/>

📝 TypeScript

Full TypeScript support included:

import { IconProps, ReactIcon } from "gcp-desechar-icons-library";

const MyComponent: React.FC = () => {
  const iconProps: IconProps = {
    size: 32,
    color: "#61dafb",
  };

  return <ReactIcon {...iconProps} />;
};

📄 License

ISC License

Made with ❤️ for developers

npm