js-icon

Auto icon resolver for developer skills, beautifully crafted and React ready. js-icon effortlessly resolves developer skills/tools names to their respective icons.

Made by Joyant Sheikhar Gupta Joy

Features

• Auto-Resolution: Simply pass the name of a skill or technology (e.g., "react", "nextjs", "aws"), and the correct icon will be rendered.
• Smart Aliasing: Built-in alias mapping allows multiple common names for a technology to map to the correct icon.
• Brand Colors: Easily render icons in their official brand colors with a single prop.
• React Ready: First-class support for React applications.

Installation

npm install js-icon

Note: Ensure you have react installed as it is a peer dependency.

Usage

React Component

The easiest way to use js-icon is via the JSIcon React component.

import { JSIcon } from "js-icon";

function App() {
  return (
    <div style={{ display: 'flex', gap: '1rem' }}>
      {/* Basic usage */}
      <JSIcon name="react" />
      
      {/* Custom size and custom color */}
      <JSIcon name="typescript" size={32} color="#3178C6" />
      
      {/* Use the official brand color */}
      <JSIcon name="next.js" size={48} colored />
      
      {/* Works with aliases and different casings (depending on your alias map) */}
      <JSIcon name="Node.js" size={32} colored />
      <JSIcon name="Amazon Web Services" size={32} colored />
    </div>
  );
}

Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | name | string | required | The name of the skill/technology. | | size | number | 16 | The width and height of the icon. | | color | string | undefined | Custom color for the icon. | | colored| boolean| false | If true, renders the icon in its official brand color. |

Core Utilities

If you need more control, you can use the core resolver utilities directly:

import { resolveIcon, getIconColor } from "js-icon";

// Get the React component for the icon
const ReactIcon = resolveIcon("react");

if (ReactIcon) {
  // Render your component...
}

// Get the official brand hex color (without the #)
const reactColorHex = getIconColor("react");