fix(icons): use title from SVG file

adobe · Nov 11, 2019 · 5fe3fe4 · 5fe3fe4
1 parent a800f98
commit 5fe3fe4
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 9 deletions.
diff --git a/src/utils/icon-handler.js b/src/utils/icon-handler.js
@@ -12,7 +12,7 @@
 
 /**
  * Handles `icon` MDAST nodes by converting them into `<svg>` tags, e.g.
- * `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-smile"><use href="/icons/smile.svg"><title>smile</title></use></svg>`
+ * `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-smile"><use href="/icons/smile.svg"></use></svg>`
  * @param {string} id the identifier of the icon
  */
 function icon() {
@@ -23,10 +23,7 @@ function icon() {
       className: `icon icon-${value}`,
     }, [h(node, 'use', {
       href: `/icons/${value}.svg`,
-    }, [h(node, 'title', null, [{
-      type: 'text',
-      value,
-    }])])])];
+    })])];
   };
 }
 

diff --git a/test/fixtures/icon-example.html b/test/fixtures/icon-example.html
@@ -1,7 +1,7 @@
-<html><head></head><body><h1 id="the-helix-pipeline-supports-icons-now">The <strong>Helix</strong> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-pipeline"><use href="/icons/pipeline.svg"><title>pipeline</title></use></svg> supports icons now</h1>
-<p>This <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tada"><use href="/icons/tada.svg"><title>tada</title></use></svg> will render as an icon. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-thumbsup"><use href="/icons/thumbsup.svg"><title>thumbsup</title></use></svg></p>
-<p>I said: this is cool. There are smiles :) - even <strong>big <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-smiles"><use href="/icons/smiles.svg"><title>smiles</title></use></svg></strong> and <a href="http://www.example.com/"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-foo"><use href="/icons/foo.svg"><title>foo</title></use></svg></a></p>
-<p>:: smile <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-smile"><use href="/icons/smile.svg"><title>smile</title></use></svg><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-smile"><use href="/icons/smile.svg"><title>smile</title></use></svg>:<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-smile"><use href="/icons/smile.svg"><title>smile</title></use></svg>::<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-smile"><use href="/icons/smile.svg"><title>smile</title></use></svg></p>
+<html><head></head><body><h1 id="the-helix-pipeline-supports-icons-now">The <strong>Helix</strong> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-pipeline"><use href="/icons/pipeline.svg"></use></svg> supports icons now</h1>
+<p>This <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tada"><use href="/icons/tada.svg"></use></svg> will render as an icon. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-thumbsup"><use href="/icons/thumbsup.svg"></use></svg></p>
+<p>I said: this is cool. There are smiles :) - even <strong>big <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-smiles"><use href="/icons/smiles.svg"></use></svg></strong> and <a href="http://www.example.com/"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-foo"><use href="/icons/foo.svg"></use></svg></a></p>
+<p>:: smile <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-smile"><use href="/icons/smile.svg"></use></svg><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-smile"><use href="/icons/smile.svg"></use></svg>:<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-smile"><use href="/icons/smile.svg"></use></svg>::<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-smile"><use href="/icons/smile.svg"></use></svg></p>
 <pre><code class="language-javascript">console.log('this is in a :code: block');
 </code></pre>
 <p><code>this is inline :code:</code></p></body></html>