Options
All
  • Public
  • Public/Protected
  • All
Menu

@thi.ng/hiccup-carbon-icons

@thi.ng/hiccup-carbon-icons

npm (scoped) npm downloads Twitter Follow

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

About

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).

Contact sheet

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

Installation

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

Dependencies

None.

Usage examples

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"));

Icon conversion process

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

Authors

  • Karsten Schmidt

License

© 2018 Karsten Schmidt // Apache Software License 2.0

Generated using TypeDoc