@dataloop-ai/components 0.19.178 → 0.19.179

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.19.178",
+  "version": "0.19.179",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -22,7 +22,7 @@
     "check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
   },
   "dependencies": {
-    "@dataloop-ai/icons": "^3.0.20",
+    "@dataloop-ai/icons": "^3.0.22",
     "@types/flat": "^5.0.2",
     "@types/lodash": "^4.14.184",
     "@types/sortablejs": "^1.15.7",

package/src/components/essential/DlIcon/DlIcon.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        v-if="!svg"
+        v-if="!isSVG"
         :id="uuid"
         :style="[inlineStyles, computedStyles]"
         @click="$emit('click', $event)"
@@ -39,6 +39,7 @@ import { isString } from 'lodash'
 import { v4 } from 'uuid'
 import { defineComponent } from 'vue-demi'
 import { getColor, loggerFactory, stringStyleToRecord } from '../../../utils'
+import { COLORED_ICONS } from '@dataloop-ai/icons/types'
 
 export default defineComponent({
     name: 'DlIcon',
@@ -110,10 +111,27 @@ export default defineComponent({
                 !this.icon.startsWith('fas') &&
                 !this.icon.startsWith('fa-')
             )
+        },
+        cleanedIconName(): string {
+            return this.icon.startsWith('icon-dl-')
+                ? this.icon.replace('icon-dl-', '')
+                : this.icon
+        },
+        isSVG(): boolean {
+            if (!this.icon) {
+                return false
+            }
+
+            if (this.svg) {
+                return true
+            }
+
+            const coloredIcons = Object.values(COLORED_ICONS)
+            return coloredIcons.includes(this.cleanedIconName as any)
         }
     },
     mounted() {
-        const possibleToLoadSvg = this.svg && this.icon && this.icon !== ''
+        const possibleToLoadSvg = this.isSVG && this.icon && this.icon !== ''
         if (possibleToLoadSvg) {
             this.loadSvg()
         }
@@ -143,8 +161,8 @@ export default defineComponent({
 
                 try {
                     svgElement.src = this.svgSource
-                        ? `${this.svgSource}/${this.icon}.svg`
-                        : `https://raw.githubusercontent.com/dataloop-ai/icons/main/assets/${this.icon}.svg`
+                        ? `${this.svgSource}/${this.cleanedIconName}.svg`
+                        : `https://raw.githubusercontent.com/dataloop-ai/icons/main/assets/${this.cleanedIconName}.svg`
                 } catch (e) {
                     reject(e)
                 }

package/src/demos/DlIconDemo.vue

@@ -1,23 +1,15 @@
 <template>
     <div>
         <DlIcon icon="icon-dl-usage" />
-        <DlIcon
-            color="dl-color-secondary"
-            icon="icon-dl-arrow-up"
-        />
-        <DlIcon
-            size="50px"
-            color="red"
-            icon="icon-dl-search"
-        />
+        <DlIcon color="dl-color-secondary" icon="icon-dl-arrow-up" />
+        <DlIcon size="50px" color="red" icon="icon-dl-search" />
         SVG ICON:
 
-        <DlIcon
-            size="50px"
-            color="red"
-            icon="mastercard"
-            svg
-        />
+        <DlIcon size="50px" color="red" icon="mastercard" svg />
+
+        COLORED WITHOUT SVG:
+
+        <DlIcon size="50px" color="red" icon="mastercard" />
 
         Clickable:
 
@@ -33,10 +25,7 @@
             style="margin-top: 10px"
             title="Custom Label"
         />
-        <DlIcon
-            size="50px"
-            :icon="inputValue"
-        />
+        <DlIcon size="50px" :icon="inputValue" />
     </div>
 </template>