@devslab/dds-icons
Directional consumers add dds-icon--directional; the packaged
direction-policy.json is the source of truth for icons that mirror in RTL
and icons whose physical direction must stay unchanged.
🌐 한국어
The DDS icon set — one SVG source per icon (24 grid, currentColor, round
caps), shipped in the three shapes consumers actually need. Spec §3.7, as
amended by D-013.
| Artifact | Import | For |
|---|---|---|
dist/svg/*.svg | @devslab/dds-icons/svg/phone.svg | build pipelines, <img>, design tools |
dist/icons.svg | @devslab/dds-icons/icons.svg | web sprite — <use href="…/icons.svg#dds-phone"> |
dist/icons.js (+ .d.ts) | @devslab/dds-icons | any runtime that builds its own element (RN, createElementNS renderers, SSR) |
import { icons } from "@devslab/dds-icons";
const i = icons.phone; // { viewBox, strokeWidth, set, body }
<!-- inline, inherits the surrounding color and font-size-independent size -->
<button class="dds-iconbtn" aria-label="Call">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<!-- icons.phone.body -->
</svg>
</button>
Two sets
- core (
svg/*.svg, stroke 1.6) — product UI. Names are function-shaped (chevron-down,external-link,globe— the flag-less fallback for a language-picker trigger); the 22 names inherited from the AskLinq widget keep their exact spelling, because renaming them would break live card icons. - site (
svg/site/site-*.svg, stroke 1.8) — devslab.kr only, drawn for 32–40px marketing display. Thesite-prefix is part of the name; the folder is only organization.
Product controls use settings for preferences (a gear), log-out for
signing out (a door with an outward arrow), search for search fields and
chevron-down for selection triggers. tool remains the repair/tool action;
arrow-right remains directional navigation.
Rules (enforced by scripts/check-icons.mjs, so CI fails, not review)
viewBox="0 0 24 24",width/height24fill="none",stroke="currentColor", round cap and join- no color literal anywhere in the file, and no
stroke/fill/styleoverrides in the body — color and weight are inherited, always - stroke width is the set's (1.6 core / 1.8 site); a third value means an icon was dropped in from somewhere else
- lowercase kebab-case names, no size or color in the name
Not here on purpose
No React/Vue/RN components are generated. Per spec §2 a framework package exists only once that framework's product does; a map of path data is what every consumer can build from today.
Live gallery: preview/icons.html (run pnpm build first).