Post B5P88EC3m7foKLVitc by toxi@mastodon.thi.ng
(DIR) More posts by toxi@mastodon.thi.ng
(DIR) Post #B5P88EC3m7foKLVitc by toxi@mastodon.thi.ng
0 likes, 1 repeats
It's been 4.5 years since I last updated the https://thi.ng/hiccup-carbon-icons collection and synced it with the upstream repo, i.e. IBM's Carbon design system. Spent a few hours today updating the icons to the current version, filtering out a hundred unnecessary ones (e.g. obsolete brand logos, IBM product/service related icons etc.) and updated the converter & code generator[1] to produce more concise outputs, then manually cleaned up the structure for dozens of them (in addition to optimizing/minimizing the SVG sources via the `svgo` CLI).The new set has exactly 2222 icons in https://thi.ng/hiccup format (SVG expressed as nested JS arrays). These icons can be used in any context where https://thi.ng/hiccup format is supported, i.e. both for static HTML/SVG generation and/or interactive scenarios. A contact sheet of the full collection (the attached image only shows a tiny selection of this): https://demo.thi.ng/umbrella/hiccup-carbon-icons/For tree-shaking purposes each icon is defined in its own source file, e.g. the Mastodon logo can be then imported like so:`import { MASTODON } from "@thi.ng/hiccup-carbon-icons"`Example icon definition:https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup-carbon-icons/src/logo-mastodon.tsThe new version is still unreleased, but the readme already contains up-to-date information and small usage examples (incl. links to live example projects to see usage in situ).[1] Converter/codegen tool: https://codeberg.org/thi.ng/umbrella/src/branch/develop/packages/hiccup-carbon-icons/tools/convert-icons.ts#ThingUmbrella #UI #Design #SVG #Icons #OpenSource