utruckin-icons 1.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 UTruckin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,164 @@
+# UTruckin Icons
+
+Vue 3 SVG icon components for UTruckin TeleDash application.
+
+## Installation
+
+```bash
+npm install utruckin-icons
+```
+
+## Usage
+
+### Import Individual Icons
+
+```vue
+<template>
+  <div>
+    <Clock :size="24" />
+    <Truck :size="32" color="blue" />
+  </div>
+</template>
+
+<script setup>
+import { Clock, Truck } from 'utruckin-icons';
+</script>
+```
+
+### Import All Icons
+
+```vue
+<script setup>
+import * as Icons from 'utruckin-icons';
+</script>
+
+<template>
+  <Icons.Clock :size="24" />
+</template>
+```
+
+## Props
+
+All icon components accept the following props:
+
+- **size**: `Number | String` (default: `24`) - Sets both width and height
+- All other props are passed to the SVG element (class, style, @click, etc.)
+
+## Examples
+
+### Basic Usage
+
+```vue
+<Clock />
+```
+
+### Custom Size
+
+```vue
+<Clock :size="48" />
+<Clock size="3rem" />
+```
+
+### Custom Color
+
+Icons use `currentColor` by default, so you can control color via CSS:
+
+```vue
+<Clock style="color: red;" />
+<Clock class="text-blue-500" />
+```
+
+### With Click Handler
+
+```vue
+<Clock @click="handleClick" />
+```
+
+### With Custom Classes
+
+```vue
+<Clock class="my-icon-class" />
+```
+
+## Development
+
+### Project Structure
+
+```
+utruckin-icons/
+├── src/
+│   └── icons/          # Place your SVG files here
+├── dist/               # Generated Vue components (auto-generated)
+├── scripts/
+│   └── build.js        # Build script
+├── package.json
+└── README.md
+```
+
+### Adding New Icons
+
+1. Add your SVG files to `src/icons/` directory
+2. Name files in kebab-case (e.g., `arrow-left.svg`, `home-icon.svg`)
+3. Run the build script:
+
+```bash
+npm run build
+```
+
+The build script will:
+- Convert SVG files to Vue components
+- Convert filenames to PascalCase (e.g., `arrow-left.svg` → `ArrowLeft.vue`)
+- Replace fill colors with `currentColor` for theming
+- Make width/height dynamic via the `size` prop
+- Generate TypeScript definitions
+
+### SVG Requirements
+
+- Use valid SVG format
+- Include `viewBox` attribute for proper scaling
+- Use `fill="none"` or specific colors (will be replaced with `currentColor`)
+
+### Build Commands
+
+```bash
+# Build all icons
+npm run build
+
+# Watch mode (future enhancement)
+npm run dev
+```
+
+## Publishing
+
+### First Time Setup
+
+```bash
+# Login to npm
+npm login
+
+# Publish
+npm publish
+```
+
+### Publishing Updates
+
+```bash
+# Update version
+npm version patch  # 1.0.0 → 1.0.1
+npm version minor  # 1.0.0 → 1.1.0
+npm version major  # 1.0.0 → 2.0.0
+
+# Publish
+npm publish
+```
+
+## License
+
+MIT
+
+## Contributing
+
+1. Add your SVG files to `src/icons/`
+2. Run `npm run build`
+3. Test the generated components
+4. Submit a pull request

package/dist/Activity.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+     viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    v-bind="$attrs"
+  >
+    
+<path d="M22 12H18L15 21L9 3L6 12H2" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'Activity',
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    }
+  }
+}
+</script>

package/dist/ActivityHeart.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+     viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    v-bind="$attrs"
+  >
+    
+<path d="M15.5 11.5H14.5L13 14.5L11 8.5L9.5 11.5H8.5M11.9932 5.13581C9.9938 2.7984 6.65975 2.16964 4.15469 4.31001C1.64964 6.45038 1.29697 10.029 3.2642 12.5604C4.75009 14.4724 8.97129 18.311 10.948 20.0749C11.3114 20.3991 11.4931 20.5613 11.7058 20.6251C11.8905 20.6805 12.0958 20.6805 12.2805 20.6251C12.4932 20.5613 12.6749 20.3991 13.0383 20.0749C15.015 18.311 19.2362 14.4724 20.7221 12.5604C22.6893 10.029 22.3797 6.42787 19.8316 4.31001C17.2835 2.19216 13.9925 2.7984 11.9932 5.13581Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ActivityHeart',
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    }
+  }
+}
+</script>

package/dist/Airplay.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+     viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    v-bind="$attrs"
+  >
+    
+<path d="M5 18C3.34315 18 2 16.6569 2 15V7.8C2 6.11984 2 5.27976 2.32698 4.63803C2.6146 4.07354 3.07354 3.6146 3.63803 3.32698C4.27976 3 5.11984 3 6.8 3H17.2C18.8802 3 19.7202 3 20.362 3.32698C20.9265 3.6146 21.3854 4.07354 21.673 4.63803C22 5.27976 22 6.11984 22 7.8V15C22 16.6569 20.6569 18 19 18M8.70803 21H15.292C15.8368 21 16.1093 21 16.2467 20.8889C16.3663 20.7923 16.4347 20.6461 16.4324 20.4925C16.4298 20.3157 16.2554 20.1064 15.9065 19.6879L12.6146 15.7375C12.4035 15.4842 12.298 15.3576 12.1716 15.3114C12.0608 15.2709 11.9392 15.2709 11.8284 15.3114C11.702 15.3576 11.5965 15.4842 11.3854 15.7375L8.09346 19.6879C7.74465 20.1064 7.57024 20.3157 7.56758 20.4925C7.56526 20.6461 7.63373 20.7923 7.75326 20.8889C7.89075 21 8.16318 21 8.70803 21Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'Airplay',
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    }
+  }
+}
+</script>

package/dist/Airpods.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg
+     viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    v-bind="$attrs"
+  >
+    
+<path d="M2 7.625C2 9.90317 3.84683 11.75 6.125 11.75C6.43089 11.75 6.58383 11.75 6.66308 11.7773C6.82888 11.8345 6.91545 11.9211 6.97266 12.0869C7 12.1662 7 12.2903 7 12.5386V18.875C7 19.7725 7.72754 20.5 8.625 20.5C9.52246 20.5 10.25 19.7725 10.25 18.875V7.625C10.25 5.34683 8.40317 3.5 6.125 3.5C3.84683 3.5 2 5.34683 2 7.625Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22 7.625C22 9.90317 20.1532 11.75 17.875 11.75C17.5691 11.75 17.4162 11.75 17.3369 11.7773C17.1711 11.8345 17.0845 11.9211 17.0273 12.0869C17 12.1662 17 12.2903 17 12.5386V18.875C17 19.7725 16.2725 20.5 15.375 20.5C14.4775 20.5 13.75 19.7725 13.75 18.875V7.625C13.75 5.34683 15.5968 3.5 17.875 3.5C20.1532 3.5 22 5.34683 22 7.625Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'Airpods',
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    }
+  }
+}
+</script>

package/dist/AlarmClock.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+     viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    v-bind="$attrs"
+  >
+    
+<path d="M5 3L2 6M22 6L19 3M6 19L4 21M18 19L20 21M12 9V13L14 15M12 21C14.1217 21 16.1566 20.1571 17.6569 18.6569C19.1571 17.1566 20 15.1217 20 13C20 10.8783 19.1571 8.84344 17.6569 7.34315C16.1566 5.84285 14.1217 5 12 5C9.87827 5 7.84344 5.84285 6.34315 7.34315C4.84285 8.84344 4 10.8783 4 13C4 15.1217 4.84285 17.1566 6.34315 18.6569C7.84344 20.1571 9.87827 21 12 21Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'AlarmClock',
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    }
+  }
+}
+</script>

package/dist/AlarmClockCheck.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+     viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    v-bind="$attrs"
+  >
+    
+<path d="M5 3L2 6M22 6L19 3M6 19L4 21M18 19L20 21M9 13.5L11 15.5L15.5 11M12 21C14.1217 21 16.1566 20.1571 17.6569 18.6569C19.1571 17.1566 20 15.1217 20 13C20 10.8783 19.1571 8.84344 17.6569 7.34315C16.1566 5.84285 14.1217 5 12 5C9.87827 5 7.84344 5.84285 6.34315 7.34315C4.84285 8.84344 4 10.8783 4 13C4 15.1217 4.84285 17.1566 6.34315 18.6569C7.84344 20.1571 9.87827 21 12 21Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'AlarmClockCheck',
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    }
+  }
+}
+</script>

package/dist/AlarmClockMinus.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+     viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    v-bind="$attrs"
+  >
+    
+<path d="M5 3L2 6M22 6L19 3M6 19L4 21M18 19L20 21M9 13H15M12 21C14.1217 21 16.1566 20.1571 17.6569 18.6569C19.1571 17.1566 20 15.1217 20 13C20 10.8783 19.1571 8.84344 17.6569 7.34315C16.1566 5.84285 14.1217 5 12 5C9.87827 5 7.84344 5.84285 6.34315 7.34315C4.84285 8.84344 4 10.8783 4 13C4 15.1217 4.84285 17.1566 6.34315 18.6569C7.84344 20.1571 9.87827 21 12 21Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'AlarmClockMinus',
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    }
+  }
+}
+</script>

package/dist/AlarmClockOff.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+     viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    v-bind="$attrs"
+  >
+    
+<path d="M10.5 5.14185C10.991 5.04813 11.493 5 12 5C14.1217 5 16.1566 5.84285 17.6569 7.34315C19.1571 8.84344 20 10.8783 20 13C20 13.507 19.9519 14.009 19.8582 14.5M18.1356 18.1337C17.9844 18.3144 17.8247 18.489 17.6569 18.6569C16.1566 20.1571 14.1217 21 12 21C9.87827 21 7.84344 20.1571 6.34315 18.6569C4.84285 17.1566 4 15.1217 4 13C4 10.8783 4.84285 8.84344 6.34315 7.34315C6.50948 7.17682 6.68238 7.01857 6.86123 6.86865M4 4L2 6M22 6L19 3M6 19L4 21M21 21L3 3" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'AlarmClockOff',
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    }
+  }
+}
+</script>

package/dist/AlarmClockPlus.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+     viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    v-bind="$attrs"
+  >
+    
+<path d="M5 3L2 6M22 6L19 3M6 19L4 21M18 19L20 21M12 16V10M9 13H15M12 21C14.1217 21 16.1566 20.1571 17.6569 18.6569C19.1571 17.1566 20 15.1217 20 13C20 10.8783 19.1571 8.84344 17.6569 7.34315C16.1566 5.84285 14.1217 5 12 5C9.87827 5 7.84344 5.84285 6.34315 7.34315C4.84285 8.84344 4 10.8783 4 13C4 15.1217 4.84285 17.1566 6.34315 18.6569C7.84344 20.1571 9.87827 21 12 21Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'AlarmClockPlus',
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    }
+  }
+}
+</script>

package/dist/AlertCircle.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+     viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    v-bind="$attrs"
+  >
+    
+<path d="M12 8V12M12 16H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'AlertCircle',
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    }
+  }
+}
+</script>

package/dist/AlertHexagon.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+     viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    v-bind="$attrs"
+  >
+    
+<path d="M12 8.00008V12.0001M12 16.0001H12.01M3 7.94153V16.0586C3 16.4013 3 16.5726 3.05048 16.7254C3.09515 16.8606 3.16816 16.9847 3.26463 17.0893C3.37369 17.2077 3.52345 17.2909 3.82297 17.4573L11.223 21.5684C11.5066 21.726 11.6484 21.8047 11.7985 21.8356C11.9315 21.863 12.0685 21.863 12.2015 21.8356C12.3516 21.8047 12.4934 21.726 12.777 21.5684L20.177 17.4573C20.4766 17.2909 20.6263 17.2077 20.7354 17.0893C20.8318 16.9847 20.9049 16.8606 20.9495 16.7254C21 16.5726 21 16.4013 21 16.0586V7.94153C21 7.59889 21 7.42756 20.9495 7.27477C20.9049 7.13959 20.8318 7.01551 20.7354 6.91082C20.6263 6.79248 20.4766 6.70928 20.177 6.54288L12.777 2.43177C12.4934 2.27421 12.3516 2.19543 12.2015 2.16454C12.0685 2.13721 11.9315 2.13721 11.7985 2.16454C11.6484 2.19543 11.5066 2.27421 11.223 2.43177L3.82297 6.54288C3.52345 6.70928 3.37369 6.79248 3.26463 6.91082C3.16816 7.01551 3.09515 7.13959 3.05048 7.27477C3 7.42756 3 7.59889 3 7.94153Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'AlertHexagon',
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    }
+  }
+}
+</script>

package/dist/AlertOctagon.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+     viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    v-bind="$attrs"
+  >
+    
+<path d="M12 8V12M12 16H12.01M2 8.52274V15.4773C2 15.7218 2 15.8441 2.02763 15.9592C2.05213 16.0613 2.09253 16.1588 2.14736 16.2483C2.2092 16.3492 2.29568 16.4357 2.46863 16.6086L7.39137 21.5314C7.56432 21.7043 7.6508 21.7908 7.75172 21.8526C7.84119 21.9075 7.93873 21.9479 8.04077 21.9724C8.15586 22 8.27815 22 8.52274 22H15.4773C15.7218 22 15.8441 22 15.9592 21.9724C16.0613 21.9479 16.1588 21.9075 16.2483 21.8526C16.3492 21.7908 16.4357 21.7043 16.6086 21.5314L21.5314 16.6086C21.7043 16.4357 21.7908 16.3492 21.8526 16.2483C21.9075 16.1588 21.9479 16.0613 21.9724 15.9592C22 15.8441 22 15.7218 22 15.4773V8.52274C22 8.27815 22 8.15586 21.9724 8.04077C21.9479 7.93873 21.9075 7.84119 21.8526 7.75172C21.7908 7.6508 21.7043 7.56432 21.5314 7.39137L16.6086 2.46863C16.4357 2.29568 16.3492 2.2092 16.2483 2.14736C16.1588 2.09253 16.0613 2.05213 15.9592 2.02763C15.8441 2 15.7218 2 15.4773 2H8.52274C8.27815 2 8.15586 2 8.04077 2.02763C7.93873 2.05213 7.84119 2.09253 7.75172 2.14736C7.6508 2.2092 7.56432 2.29568 7.39137 2.46863L2.46863 7.39137C2.29568 7.56432 2.2092 7.6508 2.14736 7.75172C2.09253 7.84119 2.05213 7.93873 2.02763 8.04077C2 8.15586 2 8.27815 2 8.52274Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'AlertOctagon',
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    }
+  }
+}
+</script>

package/dist/AlertSquare.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+     viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    v-bind="$attrs"
+  >
+    
+<path d="M12 8V12M12 16H12.01M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'AlertSquare',
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    }
+  }
+}
+</script>

package/dist/AlertTriangle.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+     viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    v-bind="$attrs"
+  >
+    
+<path d="M11.9998 8.99999V13M11.9998 17H12.0098M10.6151 3.89171L2.39019 18.0983C1.93398 18.8863 1.70588 19.2803 1.73959 19.6037C1.769 19.8857 1.91677 20.142 2.14613 20.3088C2.40908 20.5 2.86435 20.5 3.77487 20.5H20.2246C21.1352 20.5 21.5904 20.5 21.8534 20.3088C22.0827 20.142 22.2305 19.8857 22.2599 19.6037C22.2936 19.2803 22.0655 18.8863 21.6093 18.0983L13.3844 3.89171C12.9299 3.10654 12.7026 2.71396 12.4061 2.58211C12.1474 2.4671 11.8521 2.4671 11.5935 2.58211C11.2969 2.71396 11.0696 3.10655 10.6151 3.89171Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'AlertTriangle',
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    }
+  }
+}
+</script>

package/dist/AlignBottom01.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+     viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    v-bind="$attrs"
+  >
+    
+<path d="M3 21H21M12 3V17M12 17L19 10M12 17L5 10" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'AlignBottom01',
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    }
+  }
+}
+</script>

package/dist/AlignBottom02.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg
+     viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    v-bind="$attrs"
+  >
+    
+<path d="M10 18V6C10 5.06812 10 4.60218 9.84776 4.23463C9.64477 3.74458 9.25542 3.35523 8.76537 3.15224C8.39782 3 7.93188 3 7 3C6.06812 3 5.60218 3 5.23463 3.15224C4.74458 3.35523 4.35523 3.74458 4.15224 4.23463C4 4.60218 4 5.06812 4 6V18C4 18.9319 4 19.3978 4.15224 19.7654C4.35523 20.2554 4.74458 20.6448 5.23463 20.8478C5.60218 21 6.06812 21 7 21C7.93188 21 8.39782 21 8.76537 20.8478C9.25542 20.6448 9.64477 20.2554 9.84776 19.7654C10 19.3978 10 18.9319 10 18Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20 18V10C20 9.06812 20 8.60218 19.8478 8.23463C19.6448 7.74458 19.2554 7.35523 18.7654 7.15224C18.3978 7 17.9319 7 17 7C16.0681 7 15.6022 7 15.2346 7.15224C14.7446 7.35523 14.3552 7.74458 14.1522 8.23463C14 8.60218 14 9.06812 14 10V18C14 18.9319 14 19.3978 14.1522 19.7654C14.3552 20.2554 14.7446 20.6448 15.2346 20.8478C15.6022 21 16.0681 21 17 21C17.9319 21 18.3978 21 18.7654 20.8478C19.2554 20.6448 19.6448 20.2554 19.8478 19.7654C20 19.3978 20 18.9319 20 18Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'AlignBottom02',
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    }
+  }
+}
+</script>

package/dist/AlignCenter.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+     viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    v-bind="$attrs"
+  >
+    
+<path d="M18 10H6M21 6H3M21 14H3M18 18H6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'AlignCenter',
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    }
+  }
+}
+</script>

package/dist/AlignHorizontalCentre01.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+     viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    v-bind="$attrs"
+  >
+    
+<path d="M12 3V21M22 12H15.5M15.5 12L19.5 16M15.5 12L19.5 8M2 12H8.5M8.5 12L4.5 16M8.5 12L4.5 8" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'AlignHorizontalCentre01',
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: [Number, String],
+      default: 24
+    }
+  }
+}
+</script>