Gridsome how to render link icon in markdown with source-filesystem?

Question

With Gridsome's source-filesystem plugin in gridsome.config.js:

plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'docs/**/*.md',
        typeName: 'Doc',
        remark: {
          plugins: ['@gridsome/remark-prismjs'],
          autolinkHeadings: true
        }
      }
    },

I am able to render my markdown headings correctly:

## Foo Bar

renders as:

<h2 id="foo-bar">
  <a href=#foo-bar" aria-hidden="true">
    <span class="icon icon-link"></span>
  </a>
  Foo Bar
</h2>

but nothing in the documentation for the plugin or under Gridsome mentions how to actually allow the link icon to be rendered or appended/how to modify aria-hidden to false.

In Gridsome how can I render markdown heading as clickable links with the span icon visible?

Answer 1

Under the transformers section in gridsome.config.js add autolinkClassName key. The value added here would be persisted as a class near the heading.

Example:

module.exports = {
  ...
  transformers: {
    remark: {
      autolinkClassName: "fas fa-link mr-2",
      ...
    }
  }
}