New feature - VueUiIcon - Add 'sparkline' icon

Author: graphieros

TestingArena/ArenaVueUiIcon.vue

@@ -6,7 +6,7 @@ import { VueUiIcon } from "vue-data-ui";
 import { VueUiIcon as VueUiIconTreeshaken } from "vue-data-ui/vue-ui-icon";
 
 const icons = ref([
-    "annotator", "chart3dBar", "chartAgePyramid", "chartBar", "chartCandlestick", "chartChestnut", "chartDonut", "chartDonutEvolution", "chartGauge", "chartHeatmap", "chartLine", "chartMoodRadar", "chartOnion", "chartQuadrant", "chartRadar", "chartRelationCircle", "chartRings", "chartScatter", "chartSparkHistogram", "chartSparkStackbar", "chartTable", "chartThermometer", "chartTiremarks", "chartVerticalBar", "chartWaffle", "chartWheel", "close", "dashboard", "digit0", "digit1", "digit2", "digit3", "digit4", "digit5", "digit6", "digit7", "digit8", "digit9", "excel", "image", "labelClose", "labelOpen", "menu", "moodFlat", "moodHappy", "moodNeutral", "moodSad", "pdf", "screenshot", "skeleton", "smiley", "sort", "spin", "star", "tableClose", "tableOpen", "chartNestedDonuts", "chartSparkbar", "refresh", "circleQuestion", "circleExclamation", "circleCheck", "circleCancel", "moodLaughing", "moodWink", "moodEmbarrassed", "moodSurprised", "exitFullscreen", "fullscreen", "arrowRight", "arrowTop", "arrowBottom", "arrowLeft", "chartCluster", "chartSparkline", "legend", "csv", "chartGalaxy", "kpi", "kpiBox", "tooltip", "vueDataUi", "ratio", "func", "settings", "trendUp", "trendDown", "clipBoard", "zoomPlus", "zoomMinus", "clipboardLine", "clipboardDonut", "clipboardBar", "clipboardVariable", "triangle", "triangleFill", "square", "squareFill", "diamond", "diamondFill", "pentagon", "pentagonFill", "hexagon", "hexagonFill", "circle", "circleFill", "star", "starFace", "starFill", "numbers", "sigma", "mu", "lambda", "people", "copy", "accordion", "cursor", "trend", "chartStripPlot", "chartDumbbell", "copyLeft", "chartWordCloud", "stack", "unstack", "window", "chartFlow", "chartParallelCoordinatePlot", "tooltipDisabled", "pause", "play", "stop", "restart", "lap", "carouselTable", "battery", "chartStackbar", "chartBullet", "trash", "annotatorDisabled", "palette", "boxes", "chartFunnel", "chartHistoryPlot", "chartTableSparkline", "chartCirclePack", "icons", "robot", "hourglass", "computer", "htmlTag", "curlyBrackets", "curlySpread", "world", "eye", "chartRidgeline", "chartChord", "tableDialogOpen", "tableDialogClose", "minimap", "svg"
+    "annotator", "chart3dBar", "chartAgePyramid", "chartBar", "chartCandlestick", "chartChestnut", "chartDonut", "chartDonutEvolution", "chartGauge", "chartHeatmap", "chartLine", "chartMoodRadar", "chartOnion", "chartQuadrant", "chartRadar", "chartRelationCircle", "chartRings", "chartScatter", "chartSparkHistogram", "chartSparkStackbar", "chartTable", "chartThermometer", "chartTiremarks", "chartVerticalBar", "chartWaffle", "chartWheel", "close", "dashboard", "digit0", "digit1", "digit2", "digit3", "digit4", "digit5", "digit6", "digit7", "digit8", "digit9", "excel", "image", "labelClose", "labelOpen", "menu", "moodFlat", "moodHappy", "moodNeutral", "moodSad", "pdf", "screenshot", "skeleton", "smiley", "sort", "spin", "star", "tableClose", "tableOpen", "chartNestedDonuts", "chartSparkbar", "refresh", "circleQuestion", "circleExclamation", "circleCheck", "circleCancel", "moodLaughing", "moodWink", "moodEmbarrassed", "moodSurprised", "exitFullscreen", "fullscreen", "arrowRight", "arrowTop", "arrowBottom", "arrowLeft", "chartCluster", "chartSparkline", "legend", "csv", "chartGalaxy", "kpi", "kpiBox", "tooltip", "vueDataUi", "ratio", "func", "settings", "trendUp", "trendDown", "clipBoard", "zoomPlus", "zoomMinus", "clipboardLine", "clipboardDonut", "clipboardBar", "clipboardVariable", "triangle", "triangleFill", "square", "squareFill", "diamond", "diamondFill", "pentagon", "pentagonFill", "hexagon", "hexagonFill", "circle", "circleFill", "star", "starFace", "starFill", "numbers", "sigma", "mu", "lambda", "people", "copy", "accordion", "cursor", "trend", "chartStripPlot", "chartDumbbell", "copyLeft", "chartWordCloud", "stack", "unstack", "window", "chartFlow", "chartParallelCoordinatePlot", "tooltipDisabled", "pause", "play", "stop", "restart", "lap", "carouselTable", "battery", "chartStackbar", "chartBullet", "trash", "annotatorDisabled", "palette", "boxes", "chartFunnel", "chartHistoryPlot", "chartTableSparkline", "chartCirclePack", "icons", "robot", "hourglass", "computer", "htmlTag", "curlyBrackets", "curlySpread", "world", "eye", "chartRidgeline", "chartChord", "tableDialogOpen", "tableDialogClose", "minimap", "svg", "stackline"
 ])
 
 </script>

src/atoms/BaseIcon.vue

@@ -203,7 +203,8 @@ const icons = computed(() => {
         bringToBack: `<path fill="${props.stroke}" d="M 7 13 L 7 10 L 8 10 C 10 10 10 9 10 8 L 10 7 L 13 7 L 13 10 L 12 10 C 11 10 10 10 10 12 L 10 13 L 7 13"/><path fill="none" stroke="${props.stroke}" stroke-linecap="round" stroke-linejoin="round" d="M 11 9 M 9 8 L 9 3 C 9 3 9 2 8 2 L 3 2 C 2 2 2 3 2 3 L 2 8 C 2 9 3 9 3 9 L 8 9 C 9 9 9 8 9 8 M 11 12 L 11 17 C 11 18 12 18 12 18 L 17 18 C 17 18 18 18 18 17 L 18 12 C 18 12 18 11 17 11 L 12 11 C 11 11 11 12 11 12"/>`,
         printer: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 6 13 L 6 17 C 6 18 7 18 7 18 L 13 18 C 13 18 14 18 14 17 L 14 13 C 14 13 14 12 13 12 L 7 12 C 6 12 6 13 6 13 M 5 15 L 3 15 C 3 15 2 15 2 14 L 2 9 C 2 8 3 8 3 8 L 17 8 C 18 8 18 9 18 9 L 18 14 C 18 15 17 15 17 15 L 15 15 M 6 7 L 6 4 C 6 3 7 3 7 3 L 13 3 C 14 3 14 4 14 4 L 14 7"/>`,
         save: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 3 2 L 3 2 L 14 2 L 18 6 L 18 17 C 18 18 17 18 17 18 L 3 18 C 3 18 2 18 2 17 L 2 3 C 2 3 2 2 3 2 M 5 2 L 5 4 C 5 5 6 5 6 5 L 12 5 C 12 5 13 5 13 4 L 13 2 M 10 9 A 1 1 0 0 0 10 13 A 1 1 0 0 0 10 9"/>`,
-        svg: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 4 1 C 2 1 1 2 1 4 L 1 16 C 1 18 2 19 4 19 L 16 19 C 18 19 19 18 19 16 L 19 6 C 15 6 14 5 14 1 Z M 8.458 9.052 L 10 16 L 11.519 9.03 M 16 11 C 16 8 12.995 8.81 13 11 L 13 14 C 13 17 15.99 16.299 16 14 L 16 13 L 15 13 M 6.982 10.286 C 6.564 8.238 3.921 8.788 4 11 C 4.757 13.259 6.806 11.607 7 14 C 7 17 3.854 16.299 4 14"/>`
+        svg: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 4 1 C 2 1 1 2 1 4 L 1 16 C 1 18 2 19 4 19 L 16 19 C 18 19 19 18 19 16 L 19 6 C 15 6 14 5 14 1 Z M 8.458 9.052 L 10 16 L 11.519 9.03 M 16 11 C 16 8 12.995 8.81 13 11 L 13 14 C 13 17 15.99 16.299 16 14 L 16 13 L 15 13 M 6.982 10.286 C 6.564 8.238 3.921 8.788 4 11 C 4.757 13.259 6.806 11.607 7 14 C 7 17 3.854 16.299 4 14"/>`,
+        stackline: `<path d="M 2 16 L 2 18 L 18 18 L 18 10 L 14 14 L 11 12 L 8 15 L 5 13 Z" stroke="none" fill=${props.stroke} style="opacity:0.9"/><path d="M 2 16 L 5 13 L 8 15 L 11 12 L 14 14 L 18 10 L 18 6 L 14 8 L 11 6 L 8 9 L 5 8 L 2 9 Z" stroke="none" fill=${props.stroke} style="opacity:0.6"/><path d="M 2 9 L 2 2 L 18 2 L 18 6 L 14 8 L 11 6 L 8 9 L 5 8 Z" stroke="none" fill=${props.stroke} style="opacity:0.3"/><path d="M 1 1 L 1 19 L 19 19" stroke="${props.stroke}" stroke-linecap="round" stroke-linejoin="round" fill="none"/>`
     }
 });