SVG Icons
This example displays a small set of vector icons from Heroicons, shown as large, browser-rendered SVG elements. It demonstrates a practical way to embed icons directly in JavaScript without external image files. The code uses `d3.select` to build a flexbox layout, iterates over the icon keys with `selectAll` and `join`, and injects the raw SVG strings via `.html()`. The rendered SVG is then resized by setting the `width` attribute to 250 pixels.
AI-generated descriptionThis is in response to a question in the VizHub Discord on how to put icons in JavaScript and not use a bunch of image files.
This shows some random icons from https://heroicons.com/
Sometimes SVGs are larger than necessary. Try this tool and see if you can reduce the sizes: https://jakearchibald.github.io/svgomg/
Comments
Sign in to join the discussion.