@storkly/icons

Framework-neutral TypeScript icon data for the Storkly baby and family app — a soft, rounded 24×24 icon set with no React, Vue, Svelte, or Flutter dependency.

Install

npm install @storkly/icons

Usage

import {
    sleepIcon,
    sleepFilledIcon,
    icons,
    iconList,
    getIcon,
    type StorklyIcon,
    type StorklyIconName,
} from '@storkly/icons'

sleepIcon.svg // full <svg>…</svg> string (outline)
sleepFilledIcon.svg // filled variant
sleepIcon.body // inner markup only
sleepIcon.viewBox // "0 0 24 24"
sleepIcon.strokeWidth // 2

icons['bottle'] // outline, lookup by kebab-case name
icons['bottle-filled'] // filled variant
getIcon('reminder') // typed lookup helper, accepts 'reminder' or 'reminder-filled'
iconList // readonly tuple of every icon record (outline + filled)

Each icon is exported as a named constant in <camelCase>Icon form — firstStepsIcon, headCircumferenceIcon, carSeatIcon. The filled variant of every icon is exported as <camelCase>FilledIcon — firstStepsFilledIcon, headCircumferenceFilledIcon, carSeatFilledIcon — and keyed in the icons map as <name>-filled.

Variants

Every icon ships in two styles:

• Outline — the default, referenced as <name> in maps (icons['bottle']) and as <camelCase>Icon as a named export (bottleIcon).
• Filled — solid weight for selected/active states, referenced as <name>-filled (icons['bottle-filled']) and as <camelCase>FilledIcon (bottleFilledIcon).

A typical pattern is to render outline at rest and swap to filled on selection:

import { bottleIcon, bottleFilledIcon } from '@storkly/icons'

const icon = isActive ? bottleFilledIcon : bottleIcon

React

import { sleepIcon } from '@storkly/icons'

export function SleepIcon({ size = 24, color = 'currentColor' }) {
    return (
        <svg
            width={size}
            height={size}
            viewBox={sleepIcon.viewBox}
            fill="none"
            stroke={color}
            strokeWidth={sleepIcon.strokeWidth}
            strokeLinecap="round"
            strokeLinejoin="round"
            dangerouslySetInnerHTML={{ __html: sleepIcon.body }}
        />
    )
}

Vanilla DOM / SSR

import { getIcon } from '@storkly/icons'

document.querySelector('#icon')!.innerHTML = getIcon('sleep').svg

To tint inline-rendered SVGs via CSS, target the paths with fill: currentColor and set color on the parent:

.icon {
    color: var(--storkly-blue);
    width: 24px;
    height: 24px;
}
.icon svg path {
    fill: currentColor;
}

API

| Export | Type | Description | | ------------------ | ---------------------------------------- | -------------------------------------------------------------------------------------------- | | <name>Icon | StorklyIcon | Outline export per source SVG (e.g. sleepIcon, bottleIcon). | | <name>FilledIcon | StorklyIcon | Filled variant per source SVG (e.g. sleepFilledIcon, bottleFilledIcon). | | icons | Record<StorklyIconName, StorklyIcon> | Lookup map keyed by kebab-case name (outline <name>, filled <name>-filled). | | iconList | readonly StorklyIcon[] | Every icon record (outline + filled), alphabetically sorted. | | getIcon | (name: StorklyIconName) => StorklyIcon | Typed accessor; accepts both outline and filled names. | | StorklyIcon | type | { name, fileName, viewBox, strokeWidth, svg, body }. | | StorklyIconName | type | Union of every kebab-case icon name (outline + filled). |

The published package also ships the raw source SVGs under svg/ (both outline and filled) if you'd rather load them as static assets.

Design contract

| Attribute | Value | | ---------------- | ---------------------------------------------- | | viewBox | 0 0 24 24 | | Hardcoded colors | not allowed (only currentColor is permitted) |

Designed for legibility at 20–24 px. Stroke and fill on individual paths are unconstrained — apply your own fill / stroke via SVG attributes or CSS at render time.

Icon gallery

49 icons, each available in outline and filled styles (98 SVGs total).

License

CC BY-ND 4.0