Inline SVG as options.content for remark-autolink-headings

[janosh]

How would I go about setting the Octicon link icon as an inline SVG in remark-autolink-headings? I was looking at the content option but not sure how that works with setting the path element inside the SVG.

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="16"
  height="16"
  fill="black"
  viewBox="0 0 16 16"
>
  <path
    d="M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25a2 2 0 1 1 2.83 2.83l-2.5 2.5a2 2 0 0 1-2.83 0 .75.75 0 0 0-1.06 1.06 3.5 3.5 0 0 0 4.95 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 0 1 0-2.83l2.5-2.5a2 2 0 0 1 2.83 0 .75.75 0 0 0 1.06-1.06 3.5 3.5 0 0 0-4.95 0l-2.5 2.5a3.5 3.5 0 0 0 4.95 4.95l1.25-1.25a.75.75 0 0 0-1.06-1.06l-1.25 1.25a2 2 0 0 1-2.83 0z"
  />
</svg>

[wooorm]

I would recommend rehypejs/rehype-autolink-headings. It’s closer to what you’re
doing and we’ll deprecate the remark version soonish.

You can create hast nodes with hastscript. Specifically, in this case,
it exposes an SVG builder, s.

Something like this pseudo code should do the trick:

import {s} from 'hastscript'

const content = s(
  'svg',
  {
    xmlns: 'http://www.w3.org/2000/svg',
    width: 16,
    height: 16,
    fill: 'black',
    viewBox: '0 0 16 16'
  },
  s('path', {
    d: 'M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25a2 2 0 1 1 2.83 2.83l-2.5 2.5a2 2 0 0 1-2.83 0 .75.75 0 0 0-1.06 1.06 3.5 3.5 0 0 0 4.95 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 0 1 0-2.83l2.5-2.5a2 2 0 0 1 2.83 0 .75.75 0 0 0 1.06-1.06 3.5 3.5 0 0 0-4.95 0l-2.5 2.5a3.5 3.5 0 0 0 4.95 4.95l1.25-1.25a.75.75 0 0 0-1.06-1.06l-1.25 1.25a2 2 0 0 1-2.83 0z'
  })
)

// ...

unified()
  // ...
  .use(rehypeAutolinkHeadings, {content})
  // ...

[wooorm]

Instead of adding icons to every heading, you might also use the SVG defs / symbol / use feature.
It lets you define the icon once, and the have smaller SVG files using the icon:

• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs
• https://css-tricks.com/svg-symbol-good-choice-icons/

[janosh]

Great advice, thanks @wooorm! I didn't even know about SVG <symbol>s. I added them to this site with this commit in case anyone wants to try it out before diving in.

NB: Was already using rehype-autolink-headings but asked about remark-autolink-headings cause I thought it was more mainstream.