fix: replace icon svgs with spans

BREAKING CHANGE: :icons: are now replaced with <span> elements
adobe · May 13, 2022 · 03ce6cb · 03ce6cb
1 parent 01bd4a5
commit 03ce6cb
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 21 deletions.
diff --git a/src/steps/rewrite-icons.js b/src/steps/rewrite-icons.js
@@ -10,30 +10,29 @@
  * governing permissions and limitations under the License.
  */
 /* eslint-disable no-param-reassign */
-import { h, s } from 'hastscript';
+import { h } from 'hastscript';
 import { CONTINUE, visit } from 'unist-util-visit';
 
-const REGEXP_ICON = /:(#?[a-zA-Z_-]+[a-zA-Z0-9]*):/g;
+const REGEXP_ICON = /:(#?[a-z_-]+[a-z\d]*):/gi;
 
 /**
- * Create a <img> or <svg> icon dom element eg:
- * `<img class="icon icon-smile" src="/icons/smile.svg"/>` or
- * `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-smile"><use href="/icons.svg#smile"></use></svg>`
+ * Create a <span> icon element:
+ *
+ * `<span class="icon icon-smile"></span>`
+ *
  * @param {string} value the identifier of the icon
  */
 function createIcon(value) {
   let name = encodeURIComponent(value);
 
   // icon starts with #
   if (name.startsWith('%23')) {
+    // todo: still support sprite sheets?
     name = name.substring(3);
-    return s('svg', { class: `icon icon-${name}` }, [
-      s('use', { href: `/icons.svg#${name}` }),
-    ]);
   }
 
-  // create normal image
-  return h('img', { class: `icon icon-${name}`, src: `/icons/${name}.svg`, alt: `${name} icon` });
+  // create normal span
+  return h('span', { className: ['icon', `icon-${name}`] });
 }
 
 /**

diff --git a/test/fixtures/content/headings.html b/test/fixtures/content/headings.html
@@ -10,12 +10,12 @@ <h6 id="heading-6">Heading 6</h6>
         <h2 id="one-and-two"><em>one</em> and <em>two</em></h2>
         <h3 id="bar--foo-99">bar &#x26; foo-99</h3>
         <h3 id="frashberry-bar-gf-v">frashberry bar
-            <svg class="icon icon-gf"><use href="/icons.svg#gf"></use></svg>
-            <svg class="icon icon-v"><use href="/icons.svg#v"></use></svg>
+            <span class="icon icon-gf"></span>
+            <span class="icon icon-v"></span>
         </h3>
         <h3 id="trashberry-bar">trashberry bar
-            <svg class="icon icon-gf"><use href="/icons.svg#gf"></use></svg>
-            <svg class="icon icon-v"><use href="/icons.svg#v"></use></svg>
+            <span class="icon icon-gf"></span>
+            <span class="icon icon-v"></span>
         </h3>
     </div>
 </main>
diff --git a/test/fixtures/content/icons.html b/test/fixtures/content/icons.html
@@ -1,7 +1,7 @@
 <main>
     <div><h1 id="icons">Icons</h1>
-        <p>Hello <img class="icon icon-button" src="/icons/button.svg" alt="button icon"></p>
-        <p>Hello <img class="icon icon-red" src="/icons/red.svg" alt="red icon"> banner.</p>
-        <p>Hello <svg class="icon icon-check"><use href="/icons.svg#check"></use></svg> mark.</p>
+        <p>Hello <span class="icon icon-button"></span></p>
+        <p>Hello <span class="icon icon-red"></span> banner.</p>
+        <p>Hello <span class="icon icon-check"></span> mark.</p>
     </div>
 </main>
diff --git a/test/fixtures/content/md-headings.html b/test/fixtures/content/md-headings.html
@@ -1,6 +1,6 @@
 <main>
     <div>
-        <p><img class="icon icon-tccc" src="/icons/tccc.svg" alt="tccc icon"></p>
+        <p><span class="icon icon-tccc"></span></p>
     </div>
     <div>
         <h2 id="our-company"><a href="/company">Our Company</a></h2>
@@ -15,9 +15,9 @@ <h2 id="responsible-business"><a href="/responsible-business">Responsible Busine
         <h2 id="news"><a href="/news">News</a></h2>
     </div>
     <div>
-        <h2 id="search"><a href="/search"><img class="icon icon-search" src="/icons/search.svg" alt="search icon"></a></h2>
+        <h2 id="search"><a href="/search"><span class="icon icon-search"></span></a></h2>
     </div>
     <div>
-        <h2 id="globe"><a href="/countries"><img class="icon icon-globe" src="/icons/globe.svg" alt="globe icon"></a></h2>
+        <h2 id="globe"><a href="/countries"><span class="icon icon-globe"></span></a></h2>
     </div>
 </main>
diff --git a/test/fixtures/content/page-block-with-html-table.html b/test/fixtures/content/page-block-with-html-table.html
@@ -43,7 +43,7 @@ <h3 id="education">EDUCATION</h3>
                 </div>
                 <div>Call <a href="https://tel/800-858-6188">800-858-6188</a></div>
                 <div>Learn more about the free
-                    <img class="icon icon-spark" src="/icons/spark.svg" alt="spark icon"> for Education program and its benefits for classrooms <a href="https://www.adobe.com/education/express/">here</a>
+                    <span class="icon icon-spark"></span> for Education program and its benefits for classrooms <a href="https://www.adobe.com/education/express/">here</a>
                 </div>
             </div>
             <div>