New feature - VueUiIcon - Add new icons

Author: graphieros

src/atoms/BaseIcon.vue

@@ -32,7 +32,8 @@ const viewBox = computed(() => {
 
 const icons = computed(() => {
     return {
-        annotator: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M3 17 4 12C5 12 7 13 8 15L3 17M4 12 11 2C12 2 14 3 15 5L8 15M3 19C5 19 5 19 8 19 11 19 11 18 13 18 15 18 15 19 19 19M12 1C13 1 15 2 16 4" />`,
+        annotator: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 3 17 L 4 12 C 5 12 7 13 8 15 L 3 17 M 4 12 L 11 2 C 12 2 14 3 15 5 L 8 15 M 12 1 C 13 1 15 2 16 4" />`,
+        annotatorDisabled: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 3 17 L 4 12 C 5 12 7 13 8 15 L 3 17 M 4 12 L 11 2 C 12 2 14 3 15 5 L 8 15 M 12 1 C 13 1 15 2 16 4 M 2 2 L 18 17" />`,
         chart3dBar: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" d="M10 1 6 3 6 17 10 19 14 17 14 3 10 1M6 3 10 5 14 3M10 5 10 19" stroke-linecap="round" stroke-linejoin="round"/><path fill="${props.stroke}" stroke="none" style="opacity:0.3" d="M 6 10 L 10 12 L 14 10 L 14 17 L 10 19 L 6 17 L 6 10"/>`,
         chartAgePyramid: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 2 15 L 2 17 L 9 17 L 9 15 L 2 15 M 11 15 L 11 17 L 18 17 L 18 15 L 11 15 M 9 13 L 3 13 L 3 11 L 9 11 L 9 13 M 11 11 L 11 13 L 17 13 L 17 11 L 11 11 M 9 9 L 4 9 L 4 7 L 9 7 L 9 9 M 11 7 L 11 9 L 16 9 L 16 7 L 11 7 M 9 5 L 6 5 L 6 3 L 9 3 L 9 5 M 11 3 L 11 5 L 14 5 L 14 3 L 11 3" />`,
         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"/>`,
@@ -169,7 +170,9 @@ const icons = computed(() => {
         battery: `<path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M 2 6 L 2 14 C 2 16 3 16 4 16 L 15 16 C 16 16 17 16 17 14 L 17 13 C 17 13 18 13 18 12 L 18 8 C 18 7 17 7 17 7 L 17 6 C 17 4 16 4 15 4 L 4 4 C 3 4 2 4 2 6"/><path fill="${props.stroke}" style="opacity:0.6" stroke="none" d="M 4 7 L 4 13 C 4 14 5 14 5 14 L 11 14 L 11 6 L 5 6 C 5 6 4 6 4 7"/>`,
         chartStackbar: `<path stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M 8 18 L 12 18 L 12 8 C 12 7 11 7 11 7 L 9 7 C 9 7 8 7 8 8 L 8 18 M 2 18 L 6 18 L 6 12 C 6 11 5 11 5 11 L 3 11 C 3 11 2 11 2 12 L 2 18 M 14 18 L 18 18 L 18 3 C 18 2 17 2 17 2 L 15 2 C 15 2 14 2 14 3 L 14 18 M 2 14 L 6 14 M 8 11 L 12 11 M 14 7 L 18 7 M 14 12"/><path stroke="none" style="opacity:0.3" fill="${props.stroke}" d="M 2 14 L 6 14 L 6 18 L 2 18 L 2 14" /><path stroke="none" style="opacity:0.3" fill="${props.stroke}" d="M 8 11 L 12 11 L 12 18 L 8 18 L 8 11" /><path stroke="none" style="opacity:0.3" fill="${props.stroke}" d="M 14 7 L 18 7 L 18 18 L 14 18 L 14 7" />`,
         starFace: `<path stroke="${props.stroke}" stroke-width="${props.strokeWidth} stroke-linecap="round" stroke-linejoin="round" fill="none" d="M 1.333 8.2262 L 7.3093 7.3308 L 9.9598 1.9001 L 12.6581 7.3072 L 18.6421 8.1497 L 14.3335 12.3869 L 15.3813 18.3383 L 10.0201 15.55 L 4.6837 18.3856 L 5.6789 12.4251Z M 6.989 9.999 C 7.62 8.9 8.638 9.246 8.964 10.019 M 10.999 10.019 C 11.671 8.941 12.607 9.287 13.015 10.04 M 7.499 12.022 C 8.732 14.95 12.101 13.871 12.497 11.999" />`,
-        chartBullet: `<path stroke="none" fill="${props.stroke}" d="M 2 8 L 2 12 L 10 12 L 10 8 L 2 8" style="opacity: 0.6"/><path stroke="none" fill="${props.stroke}" d="M 10 8 L 10 12 L 15 12 L 15 8 L 10 8" style="opacity: 0.4"/><path stroke="none" fill="${props.stroke}" d="M 15 8 L 15 12 L 18 12 L 18 8 L 15 8" style="opacity: 0.2"/><path stroke="none" fill="${props.stroke}" d="M 2 9 L 13 9 L 13 11 L 2 11 L 2 9" style="opacity: 1"/>`
+        chartBullet: `<path stroke="none" fill="${props.stroke}" d="M 2 8 L 2 12 L 10 12 L 10 8 L 2 8" style="opacity: 0.6"/><path stroke="none" fill="${props.stroke}" d="M 10 8 L 10 12 L 15 12 L 15 8 L 10 8" style="opacity: 0.4"/><path stroke="none" fill="${props.stroke}" d="M 15 8 L 15 12 L 18 12 L 18 8 L 15 8" style="opacity: 0.2"/><path stroke="none" fill="${props.stroke}" d="M 2 9 L 13 9 L 13 11 L 2 11 L 2 9" style="opacity: 1"/>`,
+        trash: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 7 18 L 13 18 C 15 18 15 18 16 6 L 16 6 L 5 6 L 4 6 C 5 18 5 18 7 18 M 3 4 L 17 4 M 8 2 L 12 2 M 10 8 L 10 15 M 7 8 L 7.518 15.01 M 13 8 L 12.454 14.984" />`,
+        palette: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 10 2 A 1 1 0 0 0 10 18 C 10 18 14 18 14 16 C 14 13 12 14 11 13 C 10 10 14 11 15 11 C 20 11 19 2 10 2 M 6 6 A 1 1 0 0 0 8 8 A 1 1 0 0 0 6 6 M 6 11 A 1 1 0 0 0 8 13 A 1 1 0 0 0 6 11 M 11 5 A 1 1 0 0 0 13 7 A 1 1 0 0 0 11 5"/>`
     }
 });