Merge pull request #2 from indirectlylit/shared-icons

making a shared component and shared icon, reusable across the learn app

kolibri/plugins/learn/assets/src/vue/content-card/index.vue

@@ -1,7 +1,7 @@
 <template>
 
   <a v-link="link">
-    <img class="content-icon" v-if="kind" :src="icon">
+    <content-icon class="content-icon" v-if="kind" :kind="kind" :progress="progress"></content-icon>
     <img :src="thumbnail" class="thumbnail" v-if="showThumbnail">
     <div class="thumbnail" v-else>&nbsp;</div>
     <h3>
@@ -18,6 +18,9 @@
   const PageNames = require('../../state/constants').PageNames;
 
   module.exports = {
+    components: {
+      'content-icon': require('../content-icon'),
+    },
     props: {
       id: {
         type: String,
@@ -61,12 +64,6 @@
       },
     },
     computed: {
-      icon() {
-        // Note: dynamic requires should be used carefully because
-        //  they greedily add items to the webpack bundle.
-        // See https://webpack.github.io/docs/context.html
-        return require(`./content-icons/${this.progress}-${this.kind}.svg`);
-      },
       link() {
         return {
           name: PageNames.EXPLORE_CONTENT,

kolibri/plugins/learn/assets/src/vue/content-icon/index.vue

@@ -0,0 +1,34 @@
+<template>
+
+  <img :src="src">
+
+</template>
+
+
+<script>
+
+  module.exports = {
+    props: {
+      progress: {
+        type: String,
+        default: 'unstarted',
+      },
+      kind: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      src() {
+        // Note: dynamic requires should be used carefully because
+        //  they greedily add items to the webpack bundle.
+        // See https://webpack.github.io/docs/context.html
+        return require(`./content-icons/${this.progress}-${this.kind}.svg`);
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="stylus" scoped></style>

kolibri/plugins/learn/assets/src/vue/topic-card/index.vue

@@ -1,7 +1,7 @@
 <template>
 
   <a v-link="link">
-    <img src="./folder.svg">
+    <img src="../folder.svg">
     <h3 class="title">
       {{ title }}
     </h3>