CODEWITHSUNDEEP
javascriptsvgd3.js
James Mudd
James Mudd

Reputation: 2373

Obtain Bootstrap Icon SVG in JS to use in D3

I am building a D3 visualisation and would like to embed some icons. I intend to do this using svg elements inside the main d3 svg element e.g. some code like this

var svgStringOfBSIcon = someMethodToGetTheBSIconSVG(nameOfRequiredIcon)
d3.select('svg') // main SVG
    .html(svgStringOfBSIcon) // The BS icon svg

So the question is how to implement someMethodToGetTheBSIconSVG(nameOfRequiredIcon). If the method is called with 'alarm-fill' it should return

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm-fill" viewBox="0 0 16 16">
  <path d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zm2.5 5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z"/>
</svg>

Ref: https://icons.getbootstrap.com/icons/alarm-fill/

Upvotes: 0

Views: 270

Answers (1)

Mark
Mark

Reputation: 108507

Just save off the d attribute of your icon paths and do:

<!doctype html>

<html>
  <head>
    <script src="https://d3js.org/d3.v6.min.js"></script>
  </head>

  <body>
    <svg><svg>
    <script>
      let d = "M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zm2.5 5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z";

      d3.select("svg")
        .append("path")
        .attr("d", d);
    </script>
  </body>
</html>

Upvotes: 1

Related Questions