Browse Source

use heroicons

pull/1739/head
Bernd Storath 3 weeks ago
parent
commit
a7d12ee630
  1. 16
      src/app/components/Icons/ArrowDown.vue
  2. 19
      src/app/components/Icons/ArrowInf.vue
  3. 18
      src/app/components/Icons/ArrowLeftCircle.vue
  4. 18
      src/app/components/Icons/ArrowRightCircle.vue
  5. 16
      src/app/components/Icons/ArrowUp.vue
  6. 15
      src/app/components/Icons/Chart.vue
  7. 18
      src/app/components/Icons/CheckCircle.vue
  8. 18
      src/app/components/Icons/Close.vue
  9. 16
      src/app/components/Icons/Delete.vue
  10. 18
      src/app/components/Icons/Download.vue
  11. 18
      src/app/components/Icons/Edit.vue
  12. 18
      src/app/components/Icons/Info.vue
  13. 18
      src/app/components/Icons/Language.vue
  14. 18
      src/app/components/Icons/Link.vue
  15. 18
      src/app/components/Icons/Logout.vue
  16. 18
      src/app/components/Icons/Moon.vue
  17. 19
      src/app/components/Icons/Plus.vue
  18. 18
      src/app/components/Icons/QRCode.vue
  19. 19
      src/app/components/Icons/Stack.vue
  20. 18
      src/app/components/Icons/Sun.vue
  21. 20
      src/app/components/Icons/Warning.vue
  22. 1
      src/package.json
  23. 13
      src/pnpm-lock.yaml

16
src/app/components/Icons/ArrowDown.vue

@ -1,13 +1,7 @@
<template> <template>
<svg <ArrowDownIcon />
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
clip-rule="evenodd"
/>
</svg>
</template> </template>
<script lang="ts" setup>
import ArrowDownIcon from '@heroicons/vue/24/outline/esm/ArrowDownIcon';
</script>

19
src/app/components/Icons/ArrowInf.vue

@ -1,16 +1,7 @@
<template> <template>
<svg <ArrowPathIcon />
inline
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg>
</template> </template>
<script lang="ts" setup>
import ArrowPathIcon from '@heroicons/vue/24/outline/esm/ArrowPathIcon';
</script>

18
src/app/components/Icons/ArrowLeftCircle.vue

@ -1,15 +1,7 @@
<template> <template>
<svg <ArrowLeftCircleIcon />
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m11.25 9-3 3m0 0 3 3m-3-3h7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
/>
</svg>
</template> </template>
<script lang="ts" setup>
import ArrowLeftCircleIcon from '@heroicons/vue/24/outline/esm/ArrowLeftCircleIcon';
</script>

18
src/app/components/Icons/ArrowRightCircle.vue

@ -1,15 +1,7 @@
<template> <template>
<svg <ArrowRightCircleIcon />
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
/>
</svg>
</template> </template>
<script lang="ts" setup>
import ArrowRightCircleIcon from '@heroicons/vue/24/outline/esm/ArrowLeftCircleIcon';
</script>

16
src/app/components/Icons/ArrowUp.vue

@ -1,13 +1,7 @@
<template> <template>
<svg <ArrowUpIcon />
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
clip-rule="evenodd"
/>
</svg>
</template> </template>
<script lang="ts" setup>
import ArrowUpIcon from '@heroicons/vue/24/outline/esm/ArrowUpIcon';
</script>

15
src/app/components/Icons/Chart.vue

@ -1,12 +1,7 @@
<template> <template>
<svg <ChartBarIcon />
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
stroke-width="1.5"
fill="currentColor"
>
<path
d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75ZM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 0 1-1.875-1.875V8.625ZM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 0 1 3 19.875v-6.75Z"
/>
</svg>
</template> </template>
<script lang="ts" setup>
import ChartBarIcon from '@heroicons/vue/24/outline/esm/ChartBarIcon';
</script>

18
src/app/components/Icons/CheckCircle.vue

@ -1,15 +1,7 @@
<template> <template>
<svg <CheckCircleIcon />
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
/>
</svg>
</template> </template>
<script lang="ts" setup>
import CheckCircleIcon from '@heroicons/vue/24/outline/esm/CheckCircleIcon';
</script>

18
src/app/components/Icons/Close.vue

@ -1,15 +1,7 @@
<template> <template>
<svg <XMarkIcon />
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</template> </template>
<script lang="ts" setup>
import XMarkIcon from '@heroicons/vue/24/outline/esm/XMarkIcon';
</script>

16
src/app/components/Icons/Delete.vue

@ -1,13 +1,7 @@
<template> <template>
<svg <TrashIcon />
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clip-rule="evenodd"
/>
</svg>
</template> </template>
<script lang="ts" setup>
import TrashIcon from '@heroicons/vue/24/outline/esm/TrashIcon';
</script>

18
src/app/components/Icons/Download.vue

@ -1,15 +1,7 @@
<template> <template>
<svg <ArrowDownTrayIcon />
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
/>
</svg>
</template> </template>
<script lang="ts" setup>
import ArrowDownTrayIcon from '@heroicons/vue/24/outline/esm/ArrowDownTrayIcon';
</script>

18
src/app/components/Icons/Edit.vue

@ -1,15 +1,7 @@
<template> <template>
<svg <PencilSquareIcon />
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
/>
</svg>
</template> </template>
<script lang="ts" setup>
import PencilSquareIcon from '@heroicons/vue/24/outline/esm/PencilSquareIcon';
</script>

18
src/app/components/Icons/Info.vue

@ -1,15 +1,7 @@
<template> <template>
<svg <InformationCircleIcon />
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
/>
</svg>
</template> </template>
<script lang="ts" setup>
import InformationCircleIcon from '@heroicons/vue/24/outline/esm/InformationCircleIcon';
</script>

18
src/app/components/Icons/Language.vue

@ -1,15 +1,7 @@
<template> <template>
<svg <LanguageIcon />
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802"
/>
</svg>
</template> </template>
<script lang="ts" setup>
import LanguageIcon from '@heroicons/vue/24/outline/esm/LanguageIcon';
</script>

18
src/app/components/Icons/Link.vue

@ -1,15 +1,7 @@
<template> <template>
<svg <LinkIcon />
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13.213 9.787a3.391 3.391 0 0 0-4.795 0l-3.425 3.426a3.39 3.39 0 0 0 4.795 4.794l.321-.304m-.321-4.49a3.39 3.39 0 0 0 4.795 0l3.424-3.426a3.39 3.39 0 0 0-4.794-4.795l-1.028.961"
/>
</svg>
</template> </template>
<script lang="ts" setup>
import LinkIcon from '@heroicons/vue/24/outline/esm/LinkIcon';
</script>

18
src/app/components/Icons/Logout.vue

@ -1,15 +1,7 @@
<template> <template>
<svg <ArrowRightStartOnRectangleIcon />
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
/>
</svg>
</template> </template>
<script lang="ts" setup>
import ArrowRightStartOnRectangleIcon from '@heroicons/vue/24/outline/esm/ArrowRightStartOnRectangleIcon';
</script>

18
src/app/components/Icons/Moon.vue

@ -1,15 +1,7 @@
<template> <template>
<svg <MoonIcon />
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
/>
</svg>
</template> </template>
<script lang="ts" setup>
import MoonIcon from '@heroicons/vue/24/outline/esm/MoonIcon';
</script>

19
src/app/components/Icons/Plus.vue

@ -1,16 +1,7 @@
<template> <template>
<svg <PlusIcon />
inline
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/>
</svg>
</template> </template>
<script lang="ts" setup>
import PlusIcon from '@heroicons/vue/24/outline/esm/PlusIcon';
</script>

18
src/app/components/Icons/QRCode.vue

@ -1,15 +1,7 @@
<template> <template>
<svg <QrCodeIcon />
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"
/>
</svg>
</template> </template>
<script lang="ts" setup>
import QrCodeIcon from '@heroicons/vue/24/outline/esm/QrCodeIcon';
</script>

19
src/app/components/Icons/Stack.vue

@ -1,16 +1,7 @@
<template> <template>
<svg <ServerStackIcon />
inline
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z"
/>
</svg>
</template> </template>
<script lang="ts" setup>
import ServerStackIcon from '@heroicons/vue/24/outline/esm/ServerStackIcon';
</script>

18
src/app/components/Icons/Sun.vue

@ -1,15 +1,7 @@
<template> <template>
<svg <SunIcon />
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
/>
</svg>
</template> </template>
<script lang="ts" setup>
import SunIcon from '@heroicons/vue/24/outline/esm/SunIcon';
</script>

20
src/app/components/Icons/Warning.vue

@ -1,17 +1,7 @@
<template> <template>
<!-- Heroicon name: outline/exclamation --> <ExclamationTriangleIcon />
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
/>
</svg>
</template> </template>
<script lang="ts" setup>
import ExclamationTriangleIcon from '@heroicons/vue/24/outline/esm/ExclamationTriangleIcon';
</script>

1
src/package.json

@ -19,6 +19,7 @@
}, },
"dependencies": { "dependencies": {
"@eschricht/nuxt-color-mode": "^1.1.5", "@eschricht/nuxt-color-mode": "^1.1.5",
"@heroicons/vue": "^2.2.0",
"@libsql/client": "^0.14.0", "@libsql/client": "^0.14.0",
"@nuxtjs/i18n": "^9.3.1", "@nuxtjs/i18n": "^9.3.1",
"@nuxtjs/tailwindcss": "^6.13.2", "@nuxtjs/tailwindcss": "^6.13.2",

13
src/pnpm-lock.yaml

@ -11,6 +11,9 @@ importers:
'@eschricht/nuxt-color-mode': '@eschricht/nuxt-color-mode':
specifier: ^1.1.5 specifier: ^1.1.5
version: 1.1.5([email protected]) version: 1.1.5([email protected])
'@heroicons/vue':
specifier: ^2.2.0
version: 2.2.0([email protected]([email protected]))
'@libsql/client': '@libsql/client':
specifier: ^0.14.0 specifier: ^0.14.0
version: 0.14.0 version: 0.14.0
@ -791,6 +794,11 @@ packages:
'@floating-ui/[email protected]': '@floating-ui/[email protected]':
resolution: {integrity: sha512-XFlUzGHGv12zbgHNk5FN2mUB7ROul3oG2ENdTpWdE+qMFxyNxWSRmsoyhiEnpmabNm6WnUvR1OvJfUfN4ojC1A==} resolution: {integrity: sha512-XFlUzGHGv12zbgHNk5FN2mUB7ROul3oG2ENdTpWdE+qMFxyNxWSRmsoyhiEnpmabNm6WnUvR1OvJfUfN4ojC1A==}
'@heroicons/[email protected]':
resolution: {integrity: sha512-G3dbSxoeEKqbi/DFalhRxJU4mTXJn7GwZ7ae8NuEQzd1bqdd0jAbdaBZlHPcvPD2xI1iGzNVB4k20Un2AguYPw==}
peerDependencies:
vue: '>= 3'
'@humanfs/[email protected]': '@humanfs/[email protected]':
resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==} resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
engines: {node: '>=18.18.0'} engines: {node: '>=18.18.0'}
@ -3403,7 +3411,6 @@ packages:
[email protected]: [email protected]:
resolution: {integrity: sha512-T9eIRCs6b0J1SHKYIvD8+KCJMcWZ900iZyxdnSCdqxN12Z1ijzT+jY5nrk72Jw4B0HGzms2NgpryArlJqvc3Lw==} resolution: {integrity: sha512-T9eIRCs6b0J1SHKYIvD8+KCJMcWZ900iZyxdnSCdqxN12Z1ijzT+jY5nrk72Jw4B0HGzms2NgpryArlJqvc3Lw==}
cpu: [x64, arm64, wasm32]
os: [darwin, linux, win32] os: [darwin, linux, win32]
[email protected]: [email protected]:
@ -5761,6 +5768,10 @@ snapshots:
- '@vue/composition-api' - '@vue/composition-api'
- vue - vue
'@heroicons/[email protected]([email protected]([email protected]))':
dependencies:
vue: 3.5.13([email protected])
'@humanfs/[email protected]': {} '@humanfs/[email protected]': {}
'@humanfs/[email protected]': '@humanfs/[email protected]':

Loading…
Cancel
Save