@skydesign/icons

SkyDesign 3.0 icon set as tree-shakeable React components — generated from Figma with iconpackr.

• 2280 icons / 5357 components across 22 groups.
• Phosphor-style library in three weights, plus crypto token logos, social logos, and country flags.
• Each component is its own ES module (sideEffects: false) → bundlers include only the icons you import.
• Monochrome icons use currentColor (themeable via CSS color); multicolor assets (crypto / flags / multicolor logos) keep their original colors.

Install

pnpm add @skydesign/icons
# peer: react >= 16.8

Usage

import { AcornIcon, AcornFillIcon, FlagUsIcon, CoinAdaIcon } from '@skydesign/icons';

<AcornIcon />                         {/* regular weight, 2em, currentColor */}
<AcornFillIcon style={{ fontSize: 24, color: '#1890ff' }} />
<FlagUsIcon style={{ fontSize: 32 }} />   {/* multicolor, fixed colors */}

Weights

The unsuffixed component is the regular weight (the default). Other weights are separate components so they tree-shake independently:

| Component | Weight | |------------------|---------| | AcornIcon | regular | | AcornFillIcon | fill | | AcornDuotoneIcon | duotone |

Naming: phosphor/custom icons use the bare name (HouseIcon); crypto use a Coin prefix (CoinAdaIcon), social a Social prefix (SocialFacebookIcon, SocialXTwitterMonoIcon), flags a Flag prefix (FlagUsIcon, FlagGbEngIcon).

Props

Components forward className, style, onClick, etc., plus:

| Prop | Type | Notes | |---------------|--------------------|----------------------------------------| | style.fontSize | number | string | icon size (icons are sized in em) | | style.color | string | color for monochrome icons | | spin | boolean | spinning animation | | rotate | number | rotate by degrees | | width/height | string | number | override default 2em |

Catalog metadata

import { icons, groups } from '@skydesign/icons/metadata';
// icons: { group, name, display, kind, variants: { regular?, fill?, duotone?, default?, mono?, alt? } }[]

Releasing

./scripts/publish.sh          # bump patch (0.1.0 -> 0.1.1), build, publish, tag
./scripts/publish.sh 0.2.0    # explicit version

Interactive: confirms the version, builds, pnpm publish --access public, then commits chore: release @skydesign/[email protected], tags icons-v X.Y.Z, and pushes the commit and tag to the remote. Requires npm login.

Regenerating from source SVGs

SVGs live in scripts/export-icons/icons/ at the repo root. To rebuild:

pnpm run icons   # stage -> iconpackr generate -> fallback -> metadata
pnpm run build   # tsc -> dist (ESM + d.ts)

A few very large/detailed flags (Bolivia, Mexico, Ascension, St Helena, Tristan da Cunha) exceed iconpackr's transform; scripts/fallback-gen.mjs generates those by injecting the raw SVG markup, keeping them tree-shakeable.