Merge pull request #509 from ember-learn/svg-jar

stop using svg-jar

Author: mansona

addon/components/es-card-content.hbs

@@ -2,7 +2,7 @@
 {{!-- Bug link: https://github.com/ember-template-lint/ember-template-lint/issues/1286 --}}
 
 {{#if @icon}}
-  {{svg-jar @icon class="card__icon" width="60px"}}
+  <EsIcon @icon={{@icon}} @class="card__icon" width="60px" />
 {{/if}}
 
 {{#if @image}}

addon/components/es-footer-contributions.hbs

@@ -4,7 +4,7 @@
     <div class="sponsor-icons">
       {{#each @contributorLinks as |link|}}
         <a href={{link.href}} title={{link.title}} aria-label={{link.title}} class="mr-2">
-          {{svg-jar link.class class="footer-contributor-logo"}}
+          <EsIcon @icon={{link.class}} @class="footer-contributor-logo" />
         </a>
       {{/each}}
     </div>

addon/components/es-footer-info.hbs

@@ -12,7 +12,7 @@
   <div class="footer-social hide-on-mobile">
     {{#each @socialLinks as |link|}}
       <a href={{link.href}} title={{link.title}} aria-label={{link.label}} rel="me">
-        {{svg-jar link.class}} {{link.title}}
+        <EsIcon @icon={{link.class}} /> {{link.title}}
       </a>
     {{/each}}
   </div>

addon/components/es-footer-statement.hbs

@@ -5,7 +5,7 @@
     {{@tagline}}
     {{#if @contributeLink}}
       <br>
-      <a href={{@contributeLink}}>Contribute to this page {{svg-jar 'external-link'}}</a>
+      <a href={{@contributeLink}}>Contribute to this page <EsIcon @icon="external-link" /></a>
     {{/if}}
   </p>
 </div>

addon/components/es-icon.hbs

@@ -0,0 +1,2 @@
+{{!-- template-lint-disable no-triple-curlies --}}
+{{{this.icon}}}

addon/components/es-icon.js

@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+import icons from '../constants/icons';
+
+export default class EsIconComponent extends Component {
+  get icon() {
+    if (!(this.args.icon in icons)) {
+      assert(
+        `${
+          this.args.icon
+        } isn't a supported icon. We no longer support dynamid svg lookup and can only support the following icons: ${Object.keys(
+          icons
+        ).join(', ')}`
+      );
+    }
+
+    return icons[this.args.icon].replace(
+      '<svg ',
+      `<svg class="${this.args.class}"`
+    );
+  }
+}

addon/components/es-pagination.hbs

@@ -1,15 +1,15 @@
 <div class="pagination-wrapper">
   {{#if (and (has-block "previous") @showPrevious)}}
     <div class="previous-wrapper">
-      <img alt="left arrow" src="/images/icons/arrow-icon.svg" />
+      <img alt="left arrow" src="/images/arrow-icon.svg" />
       <div>{{yield to='previous'}}</div>
     </div>
   {{/if}}
 
   {{#if (and (has-block "next") @showNext)}}
     <div class="next-wrapper">
       <div>{{yield to='next'}}</div>
-      <img alt="right arrow" src="/images/icons/arrow-icon.svg" />
+      <img alt="right arrow" src="/images/arrow-icon.svg" />
     </div>
   {{/if}}
 </div>

addon/components/es-sidebar.hbs

@@ -6,7 +6,7 @@
     @type="button"
     @onClicked={{this.close}}
   >
-    {{svg-jar "close-icon"}}
+    <svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"><path d="M12.343 10.929L18 16.585l5.657-5.656a1 1 0 011.414 1.414L19.415 18l5.656 5.657a1 1 0 01-1.414 1.414L18 19.415l-5.657 5.656a1 1 0 01-1.414-1.414L16.585 18l-5.656-5.657a1 1 0 011.414-1.414z" fill="#FFF" fill-rule="evenodd"/></svg>
   </EsButton>
   <div class="es-sidebar-content">
     {{yield}}
@@ -19,5 +19,5 @@
   @type="button"
   @onClicked={{this.toggle}}
 >
-  {{svg-jar "sidebar-icon" aria-hidden="true"}}
+  <svg aria-hidden="true" width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"><g fill="#FFF" fill-rule="evenodd"><path d="M28 24.5a1 1 0 010 2H13a1 1 0 010-2h15zm0-7a1 1 0 010 2H13a1 1 0 010-2h15zm0-7a1 1 0 010 2H13a1 1 0 010-2h15zM9 24a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm0-7a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm0-7a1.5 1.5 0 110 3 1.5 1.5 0 010-3z"/></g></svg>
 </EsButton>

addon/constants/icons.js

@@ -0,0 +1 @@
+export { default } from 'ember-styleguide/components/es-icon';

app/components/es-icon.js

@@ -7,15 +7,7 @@ const staticPostcssAddonTree = require('static-postcss-addon-tree');
 module.exports = {
   name: require('./package').name,
 
-  options: {
-    svgJar: {
-      sourceDirs: [
-        'public/images/icons',
-        'node_modules/ember-styleguide/public/images/icons',
-        'tests/dummy/public/images/icons'
-      ]
-    },
-  },
+  options: {},
 
   treeForAddon() {
     var tree = this._super(...arguments);