Allow custom slugs (#4918)

.jsonlintschema

@@ -14,6 +14,12 @@
             "type": "string",
             "required": true
           },
+          "slug": {
+            "description": "The brand name slug (used as filename in icons/)",
+            "type": "string",
+            "pattern": "^[a-z0-9\\-]+_[a-z0-9\\-]+$",
+            "required": false
+          },
           "hex": {
             "description": "The icons color, as HEX (without #)",
             "type": "string",

index.html

@@ -55,6 +55,9 @@
     {% assign filename = filename | replace: ".", "-dot-" %}
     {% assign filename = filename | replace: "&", "-and-" %}
     {% assign filename = filename | replace: " ", "" | replace: "!", "" | replace: ":", "" | replace: "’", "" | replace: "'", "" | replace: "°", "" %}
+    {% if icon.slug %}
+        {% assign filename = icon.slug %}
+    {% endif %}
 
     {% assign hex = icon.hex %}
     {% assign hexCharacter1 = hex | slice: 0, 1 %}

scripts/build-package.js

@@ -32,8 +32,12 @@ function escape(value) {
   return value.replace(/(?<!\\)'/g, "\\'");
 }
 function iconToKeyValue(icon) {
-  const iconTitle = escape(icon.title);
-  return `'${iconTitle}':${iconToObject(icon)}`;
+  let iconName = escape(icon.title);
+  if (icon.slug !== titleToSlug(icon.title)) {
+    iconName = icon.slug;
+  }
+
+  return `'${iconName}':${iconToObject(icon)}`;
 }
 function iconToObject(icon) {
   return util.format(iconObjectTemplate,
@@ -57,7 +61,7 @@ function minifyAndWrite(filepath, rawJavaScript) {
 // 'main'
 const icons = [];
 data.icons.forEach(icon => {
-  const filename = titleToSlug(icon.title);
+  const filename = icon.slug || titleToSlug(icon.title);
   const svgFilepath = path.resolve(iconsDir, `${filename}.svg`);
   icon.svg = fs.readFileSync(svgFilepath, UTF8).replace(/\r?\n/, '');
   icon.slug = filename;

scripts/templates/index.js

@@ -9,7 +9,13 @@ Object.defineProperty(icons, "get", {
     var normalizedName = targetName.toLowerCase();
     for (var iconName in icons) {
       var icon = icons[iconName];
-      if (icon.title.toLowerCase() === normalizedName || icon.slug === normalizedName) {
+      if (icon.slug === normalizedName) {
+        return icon;
+      }
+    }
+    for (var iconName in icons) {
+      var icon = icons[iconName];
+      if (icon.title.toLowerCase() === normalizedName) {
         return icon;
       }
     }

tests/icons.test.js

@@ -2,7 +2,7 @@ const { icons } = require('../_data/simple-icons.json');
 const { titleToSlug } = require('../scripts/utils.js');
 
 icons.forEach(icon => {
-  const filename = titleToSlug(icon.title);
+  const filename = icon.slug || titleToSlug(icon.title);
   const subject = require(`../icons/${filename}.js`);
 
   test(`${icon.title} has a "title"`, () => {

tests/index.test.js

@@ -3,7 +3,8 @@ const simpleIcons = require('../index.js');
 const { titleToSlug } = require("../scripts/utils.js");
 
 icons.forEach(icon => {
-  const subject = simpleIcons[icon.title];
+  const name = icon.slug || icon.title;
+  const subject = simpleIcons[name];
 
   test(`${icon.title} has a "title"`, () => {
     expect(typeof subject.title).toBe('string');
@@ -31,17 +32,25 @@ icons.forEach(icon => {
     expect(typeof subject.slug).toBe('string');
   });
 
+  // NOTE: Icons with custom slugs have a custom slug because their title is
+  // already taken, so they should not be findable by their title.
+  if (icon.slug === undefined) {
     test(`${icon.title} can be found by it's title`, () => {
       const found = simpleIcons.get(icon.title);
       expect(found).toBeDefined();
       expect(found.title).toEqual(icon.title);
+      expect(found.hex).toEqual(icon.hex);
+      expect(found.source).toEqual(icon.source);
     });
+  }
 
   test(`${icon.title} can be found by it's slug`, () => {
-    const name = titleToSlug(icon.title);
+    const name = icon.slug || titleToSlug(icon.title);
     const found = simpleIcons.get(name);
     expect(found).toBeDefined();
     expect(found.title).toEqual(icon.title);
+    expect(found.hex).toEqual(icon.hex);
+    expect(found.source).toEqual(icon.source);
   });
 });