Merge pull request #391 from rtibbles/defensive_icons

Robustly handle missing icons.
learningequality · Dec 7, 2022 · 6c85d2e · 6c85d2e
2 parents 94babf2 + 553b243
commit 6c85d2e
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 6 deletions.
diff --git a/docs/pages/kicon.vue b/docs/pages/kicon.vue
@@ -2,7 +2,7 @@
 
   <DocsPageTemplate apiDocs>
     <DocsPageSection title="Overview" anchor="#overview">
-      See <DocsInternalLink href="icons" text="the page on icons" /> for design guidance and a list of available icons.
+      See <DocsInternalLink href="icons" text="the page on icons" /> for design guidance and a list of available icons. If an invalid icon is used, in development Vue.js validation will warn about the error. The icon will display as a broken image <KIcon icon="brokenImage" /> icon.
     </DocsPageSection>
   </DocsPageTemplate>
 

diff --git a/docs/rstIconReplacements.txt b/docs/rstIconReplacements.txt
@@ -8,6 +8,7 @@
 .. |back| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg></span>`
 .. |bookmarkEmpty| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 00-2 2v16l7-3 7 3V5a2 2 0 00-2-2z"/></svg></span>`
 .. |bookmark| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M17 3H7a2 2 0 00-2 2v16l7-3 7 3V5a2 2 0 00-2-2z"/></svg></span>`
+.. |brokenImage| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M21 5v6.59l-3-3.01-4 4.01-4-4-4 4-3-3.01V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2zm-3 6.42l3 3.01V19c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-6.58l3 2.99 4-4 4 4 4-3.99z"/></svg></span>`
 .. |channel| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg></span>`
 .. |checked| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M19 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></span>`
 .. |check| replace:: :raw-html:`<span class="design-system-icon"><svg viewBox="0 0 24 24" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span>`

diff --git a/lib/KIcon/iconDefinitions.js b/lib/KIcon/iconDefinitions.js
@@ -1,4 +1,4 @@
-import { themeTokens } from '../styles/theme';
+import { themePalette, themeTokens } from '../styles/theme';
 
 /**
  * Defines all icons in the Kolibri Design System
@@ -60,6 +60,10 @@ const KolibriIcons = {
     icon: require('./precompiled-icons/material-icons/error/baseline.vue').default,
     defaultColor: themeTokens().error,
   },
+  brokenImage: {
+    icon: require('./precompiled-icons/material-icons/broken_image/baseline.vue').default,
+    defaultColor: themePalette().grey.v_400,
+  },
 
   // Features and links
   learn: { icon: require('./precompiled-icons/material-icons/school/baseline.vue').default },

diff --git a/lib/KIcon/index.vue b/lib/KIcon/index.vue
@@ -50,22 +50,28 @@
       },
     },
     computed: {
+      selectedIcon() {
+        if (!KolibriIcons[this.icon]) {
+          return KolibriIcons.brokenImage;
+        }
+        return KolibriIcons[this.icon];
+      },
       computedColor() {
         if (this.disableColor) {
           return null;
         }
         if (this.color) {
           return this.color;
-        } else if (KolibriIcons[this.icon].defaultColor) {
-          return KolibriIcons[this.icon].defaultColor;
+        } else if (this.selectedIcon.defaultColor) {
+          return this.selectedIcon.defaultColor;
         }
         return this.$themeTokens.text;
       },
       rtlFlip() {
-        return KolibriIcons[this.icon].rtlFlip && this.isRtl;
+        return this.selectedIcon.rtlFlip && this.isRtl;
       },
       svgIconComponent() {
-        return KolibriIcons[this.icon].icon;
+        return this.selectedIcon.icon;
       },
     },
   };