Remove hard coded svg-s from renderer

8 files changed, 58 insertions, 68 deletions

diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
index 2a10bdd5..05eda494 100644
--- a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
+++ b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
@@ -132,29 +132,13 @@ open class HtmlRenderer(
     }
 
     private fun FlowContent.copyButton() = span(classes = "top-right-position") {
-        span("copy-icon") {
-            unsafe {
-                raw(
-                    """<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd" clip-rule="evenodd" d="M5 4H15V16H5V4ZM17 7H19V18V20H17H8V18H17V7Z" fill="black"/>
-                       </svg>""".trimIndent()
-                )
-            }
-        }
+        span("copy-icon")
         copiedPopup("Content copied to clipboard", "popup-to-left")
     }
 
     private fun FlowContent.copiedPopup(notificationContent: String, additionalClasses: String = "") =
         div("copy-popup-wrapper $additionalClasses") {
-            unsafe {
-                raw(
-                    """
-                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M18 9C18 14 14 18 9 18C4 18 0 14 0 9C0 4 4 0 9 0C14 0 18 4 18 9ZM14.2 6.2L12.8 4.8L7.5 10.1L5.3 7.8L3.8 9.2L7.5 13L14.2 6.2Z" fill="#4DBB5F"/>
-                    </svg>
-                    """.trimIndent()
-                )
-            }
+            span("copy-popup-icon")
             span {
                 text(notificationContent)
             }
@@ -629,16 +613,6 @@ open class HtmlRenderer(
         span(classes = "anchor-wrapper") {
             span(classes = "anchor-icon") {
                 attributes["pointing-to"] = pointingTo
-                unsafe {
-                    raw(
-                        """
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M21.2496 5.3C20.3496 4.5 19.2496 4 18.0496 4C16.8496 4 15.6496 4.5 14.8496 5.3L10.3496 9.8L11.7496 11.2L16.2496 6.7C17.2496 5.7 18.8496 5.7 19.8496 6.7C20.8496 7.7 20.8496 9.3 19.8496 10.3L15.3496 14.8L16.7496 16.2L21.2496 11.7C22.1496 10.8 22.5496 9.7 22.5496 8.5C22.5496 7.3 22.1496 6.2 21.2496 5.3Z"/>
-                    <path d="M8.35 16.7998C7.35 17.7998 5.75 17.7998 4.75 16.7998C3.75 15.7998 3.75 14.1998 4.75 13.1998L9.25 8.6998L7.85 7.2998L3.35 11.7998C1.55 13.5998 1.55 16.3998 3.35 18.1998C4.25 19.0998 5.35 19.4998 6.55 19.4998C7.75 19.4998 8.85 19.0998 9.75 18.1998L14.25 13.6998L12.85 12.2998L8.35 16.7998Z"/>
-                </svg>
-            """.trimIndent()
-                    )
-                }
             }
             copiedPopup("Link copied to clipboard")
         }
@@ -796,34 +770,13 @@ open class HtmlRenderer(
                         content()
                         div(classes = "footer") {
                             span("go-to-top-icon") {
-                                a(href = "#container") {
-                                    unsafe {
-                                        raw(
-                                            """
-                                    <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M11.3337 9.66683H0.666992L6.00033 3.66683L11.3337 9.66683Z" fill="black"/>
-                                        <path d="M0.666992 0.333496H11.3337V1.66683H0.666992V0.333496Z" fill="black"/>
-                                    </svg>
-                                """.trimIndent()
-                                        )
-                                    }
-                                }
+                                a(href = "#container")
                             }
                             span { text("© 2020 Copyright") }
                             span("pull-right") {
                                 span { text("Sponsored and developed by dokka") }
                                 a(href = "https://github.com/Kotlin/dokka") {
-                                    span(classes = "padded-icon") {
-                                        unsafe {
-                                            raw(
-                                                """
-                                    <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M8 0H2.3949L4.84076 2.44586L0 7.28662L0.713376 8L5.55414 3.15924L8 5.6051V0Z" fill="black"/>
-                                    </svg>
-                                """.trimIndent()
-                                            )
-                                        }
-                                    }
+                                    span(classes = "padded-icon")
                                 }
                             }
                         }
diff --git a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt
index fdb5be3c..93fe8221 100644
--- a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt
+++ b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt
@@ -121,7 +121,12 @@ object AssetsInstaller : PageTransformer {
     private val imagesPages = listOf(
         "images/arrow_down.svg",
         "images/docs_logo.svg",
-        "images/logo-icon.svg"
+        "images/logo-icon.svg",
+        "images/go-to-top-icon.svg",
+        "images/footer-go-to-link.svg",
+        "images/anchor-copy-button.svg",
+        "images/copy-icon.svg",
+        "images/copy-successful-icon.svg",
     )
 
     override fun invoke(input: RootPageNode) = input.modified(
diff --git a/plugins/base/src/main/resources/dokka/images/anchor-copy-button.svg b/plugins/base/src/main/resources/dokka/images/anchor-copy-button.svg
new file mode 100644
index 00000000..bab9d747
--- /dev/null
+++ b/plugins/base/src/main/resources/dokka/images/anchor-copy-button.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21.2496 5.3C20.3496 4.5 19.2496 4 18.0496 4C16.8496 4 15.6496 4.5 14.8496 5.3L10.3496 9.8L11.7496 11.2L16.2496 6.7C17.2496 5.7 18.8496 5.7 19.8496 6.7C20.8496 7.7 20.8496 9.3 19.8496 10.3L15.3496 14.8L16.7496 16.2L21.2496 11.7C22.1496 10.8 22.5496 9.7 22.5496 8.5C22.5496 7.3 22.1496 6.2 21.2496 5.3Z" fill="#637282"/>
+    <path d="M8.35 16.7998C7.35 17.7998 5.75 17.7998 4.75 16.7998C3.75 15.7998 3.75 14.1998 4.75 13.1998L9.25 8.6998L7.85 7.2998L3.35 11.7998C1.55 13.5998 1.55 16.3998 3.35 18.1998C4.25 19.0998 5.35 19.4998 6.55 19.4998C7.75 19.4998 8.85 19.0998 9.75 18.1998L14.25 13.6998L12.85 12.2998L8.35 16.7998Z" fill="#637282"/>
+</svg>
\ No newline at end of file
diff --git a/plugins/base/src/main/resources/dokka/images/copy-icon.svg b/plugins/base/src/main/resources/dokka/images/copy-icon.svg
new file mode 100644
index 00000000..61440f0a
--- /dev/null
+++ b/plugins/base/src/main/resources/dokka/images/copy-icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 4H15V16H5V4ZM17 7H19V18V20H17H8V18H17V7Z" fill="black"/>
+</svg>
\ No newline at end of file
diff --git a/plugins/base/src/main/resources/dokka/images/copy-successful-icon.svg b/plugins/base/src/main/resources/dokka/images/copy-successful-icon.svg
new file mode 100644
index 00000000..1865f739
--- /dev/null
+++ b/plugins/base/src/main/resources/dokka/images/copy-successful-icon.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M18 9C18 14 14 18 9 18C4 18 0 14 0 9C0 4 4 0 9 0C14 0 18 4 18 9ZM14.2 6.2L12.8 4.8L7.5 10.1L5.3 7.8L3.8 9.2L7.5 13L14.2 6.2Z" fill="#4DBB5F"/>
+</svg>
\ No newline at end of file
diff --git a/plugins/base/src/main/resources/dokka/images/footer-go-to-link.svg b/plugins/base/src/main/resources/dokka/images/footer-go-to-link.svg
new file mode 100644
index 00000000..0137e223
--- /dev/null
+++ b/plugins/base/src/main/resources/dokka/images/footer-go-to-link.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 0H2.3949L4.84076 2.44586L0 7.28662L0.713376 8L5.55414 3.15924L8 5.6051V0Z" fill="#637282"/>
+</svg>
\ No newline at end of file
diff --git a/plugins/base/src/main/resources/dokka/images/go-to-top-icon.svg b/plugins/base/src/main/resources/dokka/images/go-to-top-icon.svg
new file mode 100644
index 00000000..d987f3ea
--- /dev/null
+++ b/plugins/base/src/main/resources/dokka/images/go-to-top-icon.svg
@@ -0,0 +1,4 @@
+<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.3337 9.66683H0.666992L6.00033 3.66683L11.3337 9.66683Z" fill="#637282"/>
+    <path d="M0.666992 0.333496H11.3337V1.66683H0.666992V0.333496Z" fill="#637282"/>
+</svg>
\ No newline at end of file
diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css
index 97ac19f7..5e505f33 100644
--- a/plugins/base/src/main/resources/dokka/styles/style.css
+++ b/plugins/base/src/main/resources/dokka/styles/style.css
@@ -220,7 +220,8 @@ code.paragraph {
     align-items: center;
     display: flex;
     justify-content: flex-end;
-    padding-right: 24px;
+    padding: 10px;
+    margin-right: 14px;
     cursor: pointer;
 }
 
@@ -255,12 +256,21 @@ code.paragraph {
     cursor: pointer;
 }
 
-.symbol span.copy-icon path {
-    fill: var(--average-color);
+.symbol span.copy-icon::before {
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+    content: '';
+    /* masks are required if you want to change color of the icon dynamically instead of using those provided with the SVG */
+    -webkit-mask: url("../images/copy-icon.svg") no-repeat 50% 50%;
+    mask: url("../images/copy-icon.svg") no-repeat 50% 50%;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    background-color: var(--average-color);
 }
 
-.symbol span.copy-icon:hover path {
-    fill: black;
+.symbol span.copy-icon:hover::before {
+    background-color: black;
 }
 
 .copy-popup-wrapper {
@@ -280,6 +290,16 @@ code.paragraph {
     border-radius: 3px;
 }
 
+.copy-popup-wrapper > .copy-popup-icon::before {
+    content: url("../images/copy-successful-icon.svg");
+    padding: 8px;
+}
+
+.copy-popup-wrapper > .copy-popup-icon {
+    position: relative;
+    top: 3px;
+}
+
 .copy-popup-wrapper.popup-to-left {
     /* since it is in position absolute we can just move it to the left to make it always appear on the left side of the icon */
     left: -15em;
@@ -293,10 +313,6 @@ code.paragraph {
     font-weight: normal;
 }
 
-.copy-popup-wrapper svg {
-    padding: 8px;
-}
-
 .copy-popup-wrapper > span:last-child {
     padding-right: 14px;
 }
@@ -768,8 +784,8 @@ td.content {
     transition: 0.2s 0.5s;
 }
 
-.main-subrow .anchor-icon > svg path {
-    fill: var(--average-color);
+.main-subrow .anchor-icon::before {
+    content: url("../images/anchor-copy-button.svg");
 }
 
 .main-subrow .anchor-icon:hover {
@@ -1038,8 +1054,8 @@ td.content {
     background-color: white;
 }
 
-.footer span.go-to-top-icon path {
-    fill: var(--average-color);
+.footer span.go-to-top-icon > a::before {
+    content: url("../images/go-to-top-icon.svg");
 }
 
 .footer > span:first-child {
@@ -1060,9 +1076,8 @@ td.content {
     padding-left: 0.5em;
 }
 
-/*For svg*/
-.footer path {
-    fill: var(--breadcrumb-font-color);
+.footer .padded-icon::before {
+    content: url("../images/footer-go-to-link.svg");   
 }
 
 .pull-right {