Neverending Perpetual Motion

    @thi.ng/hiccup-carbon-icons
    TypeScript icon, indicating that this package has built-in type declarations

    3.1.14 • Public • Published

    hiccup-carbon-icons

    npm version 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), 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>

    Skypack documentation

    For Node.js REPL:

    # with flag only for < v16
    node --experimental-repl-await
    
    > const hiccupCarbonIcons = await import("@thi.ng/hiccup-carbon-icons");
    

    Package sizes (brotli'd, pre-treeshake): ESM: 77.19 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

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

    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 - 2022 Karsten Schmidt // Apache Software License 2.0

    Install

    npm i @thi.ng/hiccup-carbon-icons

    DownloadsWeekly Downloads

    77

    Version

    3.1.14

    License

    Apache-2.0

    Unpacked Size

    765 kB

    Total Files

    2204

    Last publish

    Collaborators

    • thi.ng