This project is part of the @thi.ng/umbrella monorepo.

• About
• Contact sheet
  • Status
• Installation
• Dependencies
• API
• Icon conversion process
• Authors
• License

This package provides the full set of IBM's Carbon icons in hiccup format (i.e. as Javascript encoded SVG), ready to be used with @thi.ng/hdom / @thi.ng/hiccup.

Each icon is defined in its own source file and can be imported individually. The converted icons DO NOT have a fixed size and will expand to the available size (see example below).

All icons can be previewed here: contact sheet. (Source code)

STABLE - used in production

yarn add @thi.ng/hiccup-carbon-icons

Package sizes (gzipped, pre-treeshake): ESM: 16.41 KB / CJS: 16.93 KB / UMD: 16.13 KB

• tslib

Generated API docs

import { renderOnce } from "@thi.ng/hdom";
import { CODE } from "@thi.ng/hiccup-carbon-icons";

// using tachyons css classes for brevity
const iconButton = (icon, onclick, label?) =>
    ["a", { onclick, href: "#" },
        ["span.dib.w1.h1.mr1", icon],
        label];

renderOnce(iconButton(CODE, () => alert("hi"), "show me the code"));

The icon conversion is largely automated via the supplied bash script (currently with some additional minor manual cleanup needed) and requires svgo and a checkout of both the original carbon-icons repo and the umbrella mono repo.

# install pre-requisites
yarn global add svgo

git clone https://github.com/IBM/carbon-icons.git
git clone https://github.com/thi-ng/umbrella.git

# build xml to hiccup converter CLI tool
cd umbrella/examples/xml-converter
yarn install
yarn build-cli

# switch to package root
cd ../../hiccup-carbon-icons
# convert icons and write results to package src folder
./convert-icons src ../../carbon-icons/src/svg/*.svg

# update contact sheet (will be written to package root)
yarn test

# open in browser
open contact-sheet.html

# rebuild package
yarn build

Karsten Schmidt

© 2018 - 2020 Karsten Schmidt // Apache Software License 2.0