VueUiIcon design improvements

Author: graphieros

README.md

@@ -14,7 +14,7 @@
 ![GitHub issues](https://img.shields.io/github/issues/graphieros/vue-data-ui)
 ![NPM](https://img.shields.io/npm/l/vue-data-ui)
 ![npm](https://img.shields.io/npm/dt/vue-data-ui)
-![Static Badge](https://img.shields.io/badge/components-33-green)
+![Static Badge](https://img.shields.io/badge/components-34-green)
 
 [Interactive documentation](https://vue-data-ui.graphieros.com/)
 

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.53",
+  "version": "1.9.54",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

package.json

@@ -29,16 +29,16 @@ const icons = computed(() => {
         chartBar: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 12 2 18C2 19 2 19 3 19L5 19C6 19 6 19 6 18L6 12C6 11 6 11 5 11L3 11C2 11 2 11 2 12M8 7 8 18C8 19 8 19 9 19L11 19C12 19 12 19 12 18L12 7C12 6 12 6 11 6L9 6C8 6 8 6 8 7M14 2 14 18C14 19 14 19 15 19L17 19C18 19 18 19 18 18L18 2C18 1 18 1 17 1L15 1C14 1 14 1 14 2"/>`,
         chartCandlestick: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 9 2 11C2 12 3 12 3 12L5 12C6 12 6 11 6 11L6 9C6 8 5 8 5 8L3 8C2 8 2 9 2 9M8 8 8 12C8 12 8 13 9 13L11 13C12 13 12 12 12 12L12 8C12 7 11 7 11 7L9 7C8 7 8 8 8 8M14 9 14 14C14 15 15 15 15 15L17 15C18 15 18 14 18 14L18 9C18 9 18 8 17 8L15 8C14 8 14 9 14 9M4 8 4 5M3 5 5 5M10 13 10 16M9 16 11 16M16 8 16 2M15 2 17 2M10 7 10 4M9 4 11 4M4 12 4 18M3 18 5 18M16 15 16 18M15 18 17 18" />`,
         chartChestnut: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M4 3A1 1 0 004 9 1 1 0 004 3M4 12A1 1 0 004 17 1 1 0 004 12M9 4 19 4M9 7 17 7M9 10 15 10M9 13 13 13M9 16 11 16" />`,
-        chartDonut: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 10A1 1 0 0019 10 1 1 0 001 10M6 10A1 1 0 0014 10 1 1 0 006 10M1 10 6 10M10 14 10 19M14 10" />`,
+        chartDonut: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 10A1 1 0 0019 10 1 1 0 001 10M6 10A1 1 0 0014 10 1 1 0 006 10M1 10 6 10M10 14 10 19M14 10" /><path stroke="none" stroke-width="none" fill="${props.stroke}" stroke-linecap="round" d="M1 10 6 10C6 12 8 14 10 14L10 19C6 19 1 16 1 10" style="opacity:0.3" />`,
         chartDonutEvolution: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 1 1 18C1 19 1 19 2 19L19 19M3 8A1 1 0 007 8 1 1 0 003 8M8 14A1 1 0 0012 14 1 1 0 008 14M14 4A1 1 0 0018 4 1 1 0 0014 4M7 10 9 12M11 12 15 6" />`,
         chartGauge: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M19 13A1 1 0 001 13M9 15A1 1 0 0011 15 1 1 0 009 15M10 14 11 8" />`,
         chartHeatmap: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 3 2 17C2 18 2 18 3 18L17 18C18 18 18 18 18 17L18 3C18 2 18 2 17 2L3 2C2 2 2 2 2 3M10 2 10 18M2 10 18 10M6 2 6 18M14 2 14 18M2 6 18 6M2 14 18 14"/><rect fill="${props.stroke}" stroke="none" x="2" y="6" height="4" width="4" style="opacity:0.5" /><rect fill="${props.stroke}" stroke="none" x="6" y="10" height="4" width="4" style="opacity:0.5" /><rect fill="${props.stroke}" stroke="none" x="6" y="14" height="4" width="4" style="opacity:0.5" /><rect fill="${props.stroke}" stroke="none" x="14" y="2" height="4" width="4" style="opacity:0.5" />`,
         chartLine: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 1 1 18C1 19 1 19 2 19L19 19M3 17Q3 12 5 7 6 5 8 10 10 15 11 6 12 3 14 8 16 11 19 1" />`,
-        chartMoodRadar: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M10 4 4 9 6 16 14 16 16 9 10 4M9 2A1 1 0 0011 2 1 1 0 009 2M1 8A1 1 0 003 8 1 1 0 001 8M3 18A1 1 0 005 17 1 1 0 003 18M15 18A1 1 0 0017 17 1 1 0 0015 18M17 8A1 1 0 0019 8 1 1 0 0017 8M10 7 13 10 13 14 8 13 7 9 10 7" />`,
-        chartOnion: `<circle fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" cx="10" cy="10" r="9" stroke-dasharray="20" /><circle fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" cx="10" cy="10" r="5" stroke-dasharray="16" style="transform:rotate(-110deg);transform-origin:center" /><circle fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" cx="10" cy="10" r="2" stroke-dasharray="8" style="transform:rotate(-100deg);transform-origin:center"/>`,
+        chartMoodRadar: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M10 4 4 9 6 16 14 16 16 9 10 4M9 2A1 1 0 0011 2 1 1 0 009 2M1 8A1 1 0 003 8 1 1 0 001 8M3 18A1 1 0 005 17 1 1 0 003 18M15 18A1 1 0 0017 17 1 1 0 0015 18M17 8A1 1 0 0019 8 1 1 0 0017 8" /><path stroke="none" stroke-width="none" fill="${props.stroke}" stroke-linecap="round" stroke-linejoin="round" d="M10 7 13 10 13 14 8 13 7 9 10 7" style="opacity:0.3" />`,
+        chartOnion: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M10 1C15 1 19 5 19 10 19 15 15 19 10 19 6 19 1 15 1 10M10 4C13 4 16 6 16 10 16 14 13 16 10 16 7 16 4 14 4 10M10 7C11 7 13 8 13 10 13 12 11 13 10 13 9 13 7 12 7 10" style="opacity:0.3" /><path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M10 1C15 1 19 5 19 10 19 15 15 19 10 19M10 4C13 4 16 6 16 10 16 14 13 16 10 16 7 16 4 14 4 10M10 7C11 7 13 8 13 10" />`,
         chartQuadrant: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M10 1 10 19M1 10 19 10" /><circle stroke="none" fill="${props.stroke}" cx="3" cy="14" r="1"/><circle stroke="none" fill="${props.stroke}" cx="5" cy="6" r="1"/><circle stroke="none" fill="${props.stroke}" cx="14" cy="17" r="1"/><circle stroke="none" fill="${props.stroke}" cx="17" cy="14" r="1"/><circle stroke="none" fill="${props.stroke}" cx="15" cy="4" r="1"/>`,
-        chartRadar: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 6 2 14 10 19 18 14 18 6 10 1 2 6" /><path fill="${props.stroke}" stroke="none" stroke-width="0" stroke-linecap="round" d="M4 7 10 5 18 6 12 11 10 16 6 11 4 7" />`,
-        chartRelationCircle: `<path fill="none" stroke="${props.stroke}" stroke-linecap="${props.strokeWidth}" stroke-linecap="round" d="M1 10A1 1 0 0019 10 1 1 0 001 10M1 10C7 11 9 13 10 19M10 19C10 11 8 7 6 2M10 19C10 11 12 7 14 2M10 19C11 13 12 11 19 10" />`,
+        chartRadar: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 6 2 14 10 19 18 14 18 6 10 1 2 6" /><path style="opacity:0.3" fill="${props.stroke}" stroke="none" stroke-width="0" stroke-linecap="round" d="M4 7 10 5 18 6 12 11 10 16 6 11 4 7" />`,
+        chartRelationCircle: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 10A1 1 0 0019 10 1 1 0 001 10M1 10C7 11 9 13 10 19M10 19C10 11 8 7 6 2M10 19C10 11 12 7 14 2M10 19C11 13 12 11 19 10" />`,
         chartRings: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 10A1 1 0 0019 10 1 1 0 001 10M5 14A1 1 0 0015 14 1 1 0 005 14M8 17A1 1 0 0012 17 1 1 0 008 17" />`,
         chartScatter: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M1 1 1 18C1 19 1 19 2 19L19 19" /><circle stroke="none" fill="${props.stroke}" cx="5" cy="15" r="1"/><circle stroke="none" fill="${props.stroke}" cx="6" cy="12" r="1" /><circle stroke="none" fill="${props.stroke}" cx="8" cy="15" r="1"/><circle stroke="none" fill="${props.stroke}" cx="10" cy="8" r="1"/><circle stroke="none" fill="${props.stroke}" cx="12" cy="10" r="1"/><circle stroke="none" fill="${props.stroke}" cx="14" cy="6" r="1"/><circle stroke="none" fill="${props.stroke}" cx="16" cy="4" r="1"/><circle stroke="none" fill="${props.stroke}" cx="11" cy="14" r="1"/>`,
         chartSparkHistogram: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 9 2 11C2 12 3 12 3 12L5 12C6 12 6 11 6 11L6 9C6 8 5 8 5 8L3 8C2 8 2 9 2 9M8 8 8 12C8 12 8 13 9 13L11 13C12 13 12 12 12 12L12 8C12 7 11 7 11 7L9 7C8 7 8 8 8 8M14 9 14 11C14 12 15 12 15 12L17 12C18 12 18 11 18 11L18 9C18 9 18 8 17 8L15 8C14 8 14 9 14 9" />`,