diff --git a/src/assets/link.svg b/src/assets/link.svg
new file mode 100644
index 000000000000..1c08e8a6fbc0
--- /dev/null
+++ b/src/assets/link.svg
@@ -0,0 +1 @@
+
diff --git a/src/styles/icons/link.svg b/src/styles/icons/link.svg
deleted file mode 100644
index 6999b4722de7..000000000000
--- a/src/styles/icons/link.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 21dd99cd4e20..d29f93744a64 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -20,6 +20,18 @@ body {
color: getColor(elephant);
}
+.header-link {
+ display: inline-block;
+ width: 22px;
+ height: 22px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-image: url('../assets/link.svg');
+ background-size: contain;
+}
+[aria-hidden='true']:hover .header-link {
+ visibility: visible;
+}
a,
button.as-link {
color: $text-color-highlight;
diff --git a/webpack.common.js b/webpack.common.js
index fdd32a41b78f..26fb92320fb7 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -1,6 +1,7 @@
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
+const h = require('hastscript');
const mdPlugins = [
require('remark-gfm'),
require('remark-slug'),
@@ -17,7 +18,12 @@ const mdPlugins = [
[
require('remark-autolink-headings'),
{
- behavior: 'append'
+ behavior: 'append',
+ content(node) {
+ return [
+ h('span.header-link')
+ ];
+ }
}
],
[