VuePress: Remove external links icons

Question

In Vuepress default theme, every time you add an external link, an icon is added to the link.

I am creating a new theme that inherits the default theme, but I would like to remove this behavior.

How can I do it?

Answer 1

It seems there's no way to do this in the configs for vuepress 1. However here's what I did that's acceptable.

Use the markdown section of your config.js object to understand/control what attributes are on external links:

    markdown: {
        externalLinks: { target: '_blank', rel: 'noopener noreferrer' },
    },

Then target those links. I'm using the has selector to make sure the entire span that wraps the svg is removed, so there aren't any spacing quirks. has isn't perfectly supported, but it's good enough.

a[rel="noopener noreferrer"] span:has(svg.icon.outbound)
    display: none