breaking: update to latest @primer/octicons v16 (#714)

* breaking: update to latest @primer/octicons v16

* feat: setup validate-peer-dependencies to check peerDeps are well installed in application

Author: GreatWizard

README.md

@@ -4,7 +4,7 @@
 
 [![Ember Observer Score](https://emberobserver.com/badges/ember-octicons.svg)](https://emberobserver.com/addons/ember-octicons)
 
-Easily import [GitHub Octicons](https://octicons.github.com/) into an Ember application's build.
+Easily import [GitHub Primer/Octicons](https://primer.style/octicons/) into an Ember application's build.
 
 ## Usage
 
@@ -24,15 +24,15 @@ To import Octicon SVGs as build time assets, add an `octicons` configuration obj
 // ember-cli-build.js
   let app = new EmberAddon(defaults, {
     octicons: {
-      icons: ['alert', 'bell', 'j', /* etc... */]
+      icons: ['alert', 'bell', 'mark-github', /* etc... */]
     }
   });
 ```
 
 Now the SVG file can be used like any other asset:
 
 ```hbs
-<img src="images/svg/octicons/mark-github.svg">
+<img src="images/svg/octicons/mark-github-16.svg" class="octicon" />
 ```
 
 By default, SVG files will be imported into the `images/svg/octicons` directory. To customize the import destination, set a `destDir` in the `octicons` config:
@@ -60,7 +60,7 @@ If you would rather use [ember-svg-jar](https://github.com/ivanvotti/ember-svg-j
     svgJar: {
       sourceDirs: [
         'public', // default SVGJar lookup directory
-        'node_modules/octicons/build/svg'
+        'node_modules/@primer/octicons/build/svg'
       ]
     }
   });
@@ -69,7 +69,7 @@ If you would rather use [ember-svg-jar](https://github.com/ivanvotti/ember-svg-j
 And then use Ember SVGJar's `{{svg-jar}}` helper:
 
 ```hbs
-{{svg-jar "mark-github" class="octicon"}}
+{{svg-jar "mark-github-16" class="octicon"}}
 ```
 
 ### CSS

blueprints/ember-octicons/index.js

@@ -2,6 +2,6 @@ module.exports = {
   normalizeEntityName() {}, // no-op since we're just adding dependencies
 
   afterInstall() {
-    return this.addPackageToProject('octicons', '^8.0.0');
+    return this.addPackageToProject('@primer/octicons', '^16.0.0');
   },
 };

ember-cli-build.js

@@ -9,7 +9,7 @@ module.exports = function (defaults) {
       icons: ['mark-github'],
     },
     svgJar: {
-      sourceDirs: ['node_modules/octicons/build/svg'],
+      sourceDirs: ['node_modules/@primer/octicons/build/svg'],
     },
   });
 

index.js

@@ -1,30 +1,53 @@
 'use strict';
 
-var Funnel = require('broccoli-funnel');
-var fs = require('fs');
-var glob = require('glob');
+const Funnel = require('broccoli-funnel');
+const fs = require('fs');
+const glob = require('glob');
+const validatePeerDependencies = require('validate-peer-dependencies');
 
-var octiconsDir = 'node_modules/octicons';
+const octiconsDir = 'node_modules/@primer/octicons';
 
 module.exports = {
   name: require('./package').name,
-  octiconsConfig: null,
+
+  init() {
+    this._super.init.apply(this, arguments);
+
+    validatePeerDependencies(__dirname, {
+      resolvePeerDependenciesFrom: this.parent.root,
+    });
+  },
 
   included(app) {
     this._super.included(app);
 
-    this.octiconsConfig = this.buildConfig();
+    let octiconsConfig = this.buildConfig();
 
     // Import SVG icons
-    if (this.octiconsConfig.icons !== null) {
-      let destDir = this.octiconsConfig.destDir || 'images/svg/octicons';
-      this.octiconsConfig.icons.forEach((icon) => {
-        let iconPath = `node_modules/octicons/build/svg/${icon}.svg`;
-        if (fs.existsSync(iconPath)) {
-          app.import(`node_modules/octicons/build/svg/${icon}.svg`, {
+    if (octiconsConfig.icons !== null) {
+      let destDir = octiconsConfig.destDir || 'images/svg/octicons';
+      octiconsConfig.icons.forEach((icon) => {
+        let baseFile = `${octiconsDir}/build/svg/${icon}`;
+        let notFound = true;
+        if (fs.existsSync(`${baseFile}.svg`)) {
+          app.import(`${baseFile}.svg`, {
+            destDir,
+          });
+          notFound = false;
+        }
+        if (fs.existsSync(`${baseFile}-16.svg`)) {
+          app.import(`${baseFile}-16.svg`, {
+            destDir,
+          });
+          notFound = false;
+        }
+        if (fs.existsSync(`${baseFile}-24.svg`)) {
+          app.import(`${baseFile}-24.svg`, {
             destDir,
           });
-        } else {
+          notFound = false;
+        }
+        if (notFound) {
           this.writeWarning(`Unknown icon: '${icon}' will not be imported`);
         }
       });
@@ -51,18 +74,21 @@ module.exports = {
 
   buildConfig() {
     let config = (this.app && this.app.options) || {};
-    let octiconsConfig = config['octicons'] || {
-      destDir: null,
-      icons: [],
-    };
+    let octiconsConfig = Object.assign(
+      {
+        destDir: null,
+        icons: [],
+      },
+      config['octicons']
+    );
 
     if (octiconsConfig.icons !== null && octiconsConfig.icons.length === 0) {
       this.writeWarning(
         'No octicons were specified in ember-cli-build; defaulting to all icons'
       );
 
       glob
-        .sync('node_modules/octicons/build/svg/*.svg')
+        .sync(`${octiconsDir}/build/svg/*.svg`)
         .map((i) => i.split('/').pop())
         .map((i) => i.replace(/\.svg$/i, ''))
         .reduce((a, v) => {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ember-octicons",
   "version": "3.0.0",
-  "description": "Easily add GitHub Octicons to your Ember project.",
+  "description": "Easily add GitHub Primer/Octicons to your Ember project.",
   "keywords": [
     "ember-addon",
     "octicons",
@@ -29,20 +29,21 @@
   },
   "dependencies": {
     "broccoli-funnel": "^3.0.1",
-    "broccoli-merge-trees": "^4.1.0",
     "ember-cli-babel": "^7.26.6",
     "ember-cli-htmlbars": "^5.7.1",
-    "glob": "^7.1.2"
+    "glob": "^7.1.2",
+    "validate-peer-dependencies": "^2.0.0"
   },
   "peerDependencies": {
-    "octicons": "^8.0.0"
+    "@primer/octicons": "^16.0.0"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
     "@ember/test-helpers": "^2.2.5",
     "@embroider/test-setup": "^0.46.2",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
+    "@primer/octicons": "^16.0.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
     "ember-auto-import": "^1.11.3",
@@ -62,7 +63,7 @@
     "ember-resolver": "^8.0.0",
     "ember-source": "~3.28.0",
     "ember-source-channel-url": "^3.0.0",
-    "ember-svg-jar": "^2.1.0",
+    "ember-svg-jar": "^2.3.3",
     "ember-template-lint": "^3.4.2",
     "ember-try": "^1.4.0",
     "eslint": "^7.27.0",
@@ -73,7 +74,6 @@
     "eslint-plugin-qunit": "^6.1.1",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
-    "octicons": "^8.4.2",
     "prettier": "^2.3.0",
     "qunit": "^2.15.0",
     "qunit-dom": "^2.0.0"

tests/dummy/app/templates/application.hbs

@@ -7,10 +7,10 @@
 
 <img
   alt="GitHub"
-  src="images/svg/octicons/mark-github.svg"
-  style="width:160px; height:160px;"
->
+  src="images/svg/octicons/mark-github-16.svg"
+  class="octicon"
+/>
 
 <h2>SVG Jar Embed</h2>
 
-{{svg-jar "mark-github" class="octicon" width="160" height="160"}}
+{{svg-jar "mark-github-16" class="octicon"}}