[gatsby-theme-minimal-blog] Styling the header anchor link SVG icon

[artfreyr]

Hello! I am using gatsby-starter-minimal-blog and am hoping to be able to link directly to headers within a Post.

I have managed to get that working by including the following in the gatsby-config.js file at root directory, and setting mdx: false in @lekoarts/gatsby-theme-minimal-blog:

{
    resolve: `gatsby-plugin-mdx`,
    options: {
        lessBabel: true,
        extensions: [`.mdx`, `.md`],
        gatsbyRemarkPlugins: [
            {
                resolve: `gatsby-remark-images`,
                options: {
                    maxWidth: 960,
                    quality: 90,
                    linkImagesToOriginal: false,
                    backgroundColor: `transparent`,
                },
            },
            {
                resolve: `gatsby-remark-autolink-headers`,
                options: {
                    className: `header-link-icon`,
                    maintainCase: false,
                }
            }
        ],
    },
},

I am however now trying to style the hyperlink icon in the screenshot above but have had no luck so far.

I have tried Shadowing several files. The last file I've tried would be @lekoarts/gatsby-theme-minimal-blog/texts/src/styles/code.ts where I added a CSS fill property for the header-link-icon CSS class I defined above but still no luck. Can somebody please point me in the right place I can make this change?

Thanks in advance, any help would be appreciated!

[artfreyr]

After a couple of tries I have managed to style the anchor icon! Will leave my solution here, but open to suggestions on better ways to do it.

I was previously shadowing files in the wrong directory. The directory should not have /src in it.

To style the icon, I shadowed the post.tsx file by putting that in @lekoarts/gatsby-theme-minimal-blog/components, then updated the relative imports to the following:

import Layout from "@lekoarts/gatsby-theme-minimal-blog/src/components/layout"
import ItemTags from "@lekoarts/gatsby-theme-minimal-blog/src/components/item-tags"
import Seo from "@lekoarts/gatsby-theme-minimal-blog/src/components/seo"
import PostFooter from "@lekoarts/gatsby-theme-minimal-blog/src/components/post-footer"

I then added a new post.css file in the same directory with the following CSS style

a.anchor {
  filter: invert(100%);
}

And imported the .css file in post.tsx

import "./post.css"

Notes:

1. Use npm run clean to clean Gatsby cache if things start behaving weirdly