Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG Icons in JS

Public visualization

Viewing a saved revision (read-only)

7cac892eb60c4078ab1845edf9a7ea1b

SVG Icons in JS

0 stars1🌍 Public
CCurran Kelleher
Last edited Jan 24, 2024
Created on Jan 24, 2024
Forked from Circles with D3

This example demonstrates how to embed SVG icons directly in JavaScript code as template strings, avoiding the need for separate image files. It displays three icons from heroicons.com—an arrow path, an external link, and a gear—centered in a flexbox layout. Using D3.js, the code maps over the icon keys and injects the SVG markup into div elements via the `.html()` method, then resizes each icon to 250 pixels wide. The approach highlights a clean, dependency-light way to manage icons in web visualizations.

AI-generated description

Creating circles with D3.

Challenge

  • Fork this example
  • Modify it
  • Maybe make it Halloween themed
  • Maybe make it Christmas themed
  • Be creative

Svelte

Here's a video on how to get started with Svelte as well!