@thi.ng/hiccup-carbon-icons v3.1.60
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), counting in at ~1100 and ready to be used within any @thi.ng/hiccup supporting scenario.
Each icon is defined in its own source file and can be imported individually.
The converted icons are based on the 32x32 pixel versions, but have NO explicit
size set (only viewBox
attrib). Use the withSize()
helper to inject a size,
e.g. withSize(DOWNLOAD, "12px")
.
Contact sheet
All icons can be previewed here: contact sheet. (Source code)
Status
STABLE - used in production
Search or submit any issues for this package
Installation
yarn add @thi.ng/hiccup-carbon-icons
ES module import:
<script type="module" src="https://cdn.skypack.dev/@thi.ng/hiccup-carbon-icons"></script>
For Node.js REPL:
# with flag only for < v16
node --experimental-repl-await
> const hiccupCarbonIcons = await import("@thi.ng/hiccup-carbon-icons");
Package sizes (gzipped, pre-treeshake): ESM: 99.08 KB
Dependencies
None
Usage examples
Several demos in this repo's /examples directory are using this package.
A selection:
Screenshot | Description | Live demo | Source |
---|---|---|---|
Canvas based Immediate Mode GUI components | Demo | Source | |
Parser grammar livecoding editor/playground & codegen | Demo | Source | |
rdom drag & drop example | Demo | Source |
API
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
(For contributors only...)
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 and the umbrella mono repos.
# install pre-requisites
yarn global add svgo
git clone https://github.com/thi-ng/umbrella.git
# build entire umbrella repo
cd umbrella
yarn build
# build xml to hiccup converter CLI tool
cd examples/xml-converter
yarn build-cli
# switch to package root
cd ../../hiccup-carbon-icons
# clone carbon repo into local temp dir
git clone https://github.com/carbon-design-system/carbon.git tmp
# convert original SVG icons and write results to package src folder
yarn build:convert src tmp/packages/icons/src/svg/32
# update contact sheet (will be written to package root)
yarn build:sheet
# open in browser
open contact-sheet.html
# fixup any conversion issues (rinse & repeat...)
# e.g. in the latest version (2020/08), several icons use paths w/ opacity=0 which need to be removed
# rebuild package
yarn build
Authors
Karsten Schmidt
If this project contributes to an academic publication, please cite it as:
@misc{thing-hiccup-carbon-icons,
title = "@thi.ng/hiccup-carbon-icons",
author = "Karsten Schmidt",
note = "https://thi.ng/hiccup-carbon-icons",
year = 2018
}
License
The copyright of the original icons is with IBM. The icons were published under the same license as this package.
© 2018 - 2021 Karsten Schmidt // Apache Software License 2.0
2 days ago
17 days ago
20 days ago
29 days ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
5 months ago
6 months ago
8 months ago
6 months ago
7 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago