diff --git a/package.json b/package.json index cf42788..b5f27d2 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,6 @@ "@types/cookie-parser": "^1.4.2", "@types/express": "^4.17.6", "@types/express-session": "^1.17.0", - "@types/feather-icons": "^4.7.0", "@types/formidable": "^2.0.0", "@types/geoip-lite": "^1.1.31", "@types/jest": "^27.0.2", @@ -56,7 +55,6 @@ "eslint-plugin-node": "^11.1.0", "eslint-plugin-simple-import-sort": "^7.0.0", "eslint-plugin-svelte3": "^3.1.2", - "feather-icons": "^4.28.0", "jest": "^27.3.1", "jest-resolve": "^27.3.1", "jest-ts-webcompat-resolver": "^1.0.0", @@ -84,6 +82,7 @@ "express-session": "^1.17.1", "formidable": "^2.0.1", "geoip-lite": "^1.4.2", + "lucide": "^0.16.17", "mjml": "^4.6.2", "mysql": "^2.18.1", "nanoid": "^3.1.20", diff --git a/src/assets/scss/base.scss b/src/assets/scss/base.scss index eb318d1..a98f1d3 100644 --- a/src/assets/scss/base.scss +++ b/src/assets/scss/base.scss @@ -155,7 +155,7 @@ h1 { a { text-decoration: none; - .feather.feather-external-link { //todo add js + .icon.feather-external-link { //todo add js --icon-size: 16px; margin-left: 4px; margin-top: -3px; @@ -239,12 +239,12 @@ button, .button { border: 0; } - .feather { + .icon { --icon-size: 16px; margin-right: 8px; } - .feather.last { + .icon.last { margin-right: 0; margin-left: 8px; } diff --git a/src/assets/scss/panel.scss b/src/assets/scss/panel.scss index e6de525..13b2ce5 100644 --- a/src/assets/scss/panel.scss +++ b/src/assets/scss/panel.scss @@ -16,7 +16,7 @@ margin: 16px 8px; } - > .feather:first-child { + > .icon:first-child { --icon-size: 24px; position: absolute; opacity: 0.2; @@ -35,7 +35,7 @@ font-size: 24px; line-height: 1; - .feather { + .icon { --icon-size: 24px; margin: 0 16px 0 0; opacity: 0.2; diff --git a/src/assets/ts/featherIcons.ts b/src/assets/ts/featherIcons.ts deleted file mode 100644 index f67604a..0000000 --- a/src/assets/ts/featherIcons.ts +++ /dev/null @@ -1,10 +0,0 @@ -import feather from "feather-icons"; - -let alreadyReplaced = false; - -export function replaceIcons(once: boolean = true): void { - if (!once || !alreadyReplaced) { - alreadyReplaced = true; - feather.replace(); - } -} diff --git a/src/assets/ts/icons.ts b/src/assets/ts/icons.ts new file mode 100644 index 0000000..b2bfe86 --- /dev/null +++ b/src/assets/ts/icons.ts @@ -0,0 +1,11 @@ +import {createIcons, icons} from "lucide"; + +let hasAlreadyReplacedIcons = false; + +export function replaceIcons(once: boolean): void { + if (!once || !hasAlreadyReplacedIcons) { + console.log('Create icons...'); + createIcons({icons}); + hasAlreadyReplacedIcons = true; + } +} diff --git a/src/assets/views/auth/account/NamePanel.svelte b/src/assets/views/auth/account/NamePanel.svelte index 71c0c8b..91a301e 100644 --- a/src/assets/views/auth/account/NamePanel.svelte +++ b/src/assets/views/auth/account/NamePanel.svelte @@ -4,13 +4,14 @@ import Form from "../../utils/Form.svelte"; import Field from "../../utils/Field.svelte"; import {hasRoute, route} from "../../../../common/Routing"; + import Icon from "../../utils/Icon.svelte"; let newName = ''; {#if hasRoute('change-name')}
-

Change name

+

Change name

{#if $locals.can_change_name} diff --git a/src/assets/views/auth/account/PasswordPanel.svelte b/src/assets/views/auth/account/PasswordPanel.svelte index f25869b..151cea0 100644 --- a/src/assets/views/auth/account/PasswordPanel.svelte +++ b/src/assets/views/auth/account/PasswordPanel.svelte @@ -3,13 +3,14 @@ import Form from "../../utils/Form.svelte"; import Field from "../../utils/Field.svelte"; import {hasRoute, route} from "../../../../common/Routing"; + import Icon from "../../utils/Icon.svelte"; let removePasswordMode = false; {#if hasRoute('remove-password', 'change-password')}
-

{$locals.has_password ? 'Change' : 'Set'} password

+

{$locals.has_password ? 'Change' : 'Set'} password

{#if removePasswordMode}
-

Personal information

+

Personal information

{#if $locals.display_email_warning && $locals.emails.length <= 0} @@ -40,7 +41,7 @@ {/if}
-

Email addresses

+

Email addresses

diff --git a/src/assets/views/auth/auth.svelte b/src/assets/views/auth/auth.svelte index ad14119..db3f8d4 100644 --- a/src/assets/views/auth/auth.svelte +++ b/src/assets/views/auth/auth.svelte @@ -25,7 +25,7 @@
{#if hasRoute('login')}
-

Log in

+

Log in

-

Register

+

Register

diff --git a/src/assets/views/backend/index.svelte b/src/assets/views/backend/index.svelte index 6c29bbe..fba4ee8 100644 --- a/src/assets/views/backend/index.svelte +++ b/src/assets/views/backend/index.svelte @@ -2,6 +2,7 @@ import {locals} from "../../ts/stores.js"; import BaseLayout from "../layouts/BaseLayout.svelte"; import Breadcrumb from "../components/Breadcrumb.svelte"; + import Icon from "../utils/Icon.svelte"; const menu = $locals.menu || []; @@ -19,7 +20,7 @@
  • {#if element.display_icon !== null} - + {/if} {element.display_string} diff --git a/src/assets/views/components/Message.svelte b/src/assets/views/components/Message.svelte index 099e908..2adf74a 100644 --- a/src/assets/views/components/Message.svelte +++ b/src/assets/views/components/Message.svelte @@ -45,7 +45,7 @@ border-radius: 5px; - :global(.feather) { + :global(.icon) { --icon-size: 24px; margin-right: 8px; } @@ -77,7 +77,7 @@ &-discreet { color: var(--on-surface); - .feather { + .icon { --icon-size: 20px; } } @@ -94,7 +94,7 @@ border: 0; - :global(.feather) { + :global(.icon) { margin: 0; } } diff --git a/src/assets/views/components/NavMenu.svelte b/src/assets/views/components/NavMenu.svelte index 01e4b6e..badaf49 100644 --- a/src/assets/views/components/NavMenu.svelte +++ b/src/assets/views/components/NavMenu.svelte @@ -96,7 +96,7 @@ border-radius: $headerHeight; - :global(.feather) { + :global(.icon) { --icon-size: 28px; margin: 0; } diff --git a/src/assets/views/components/NavMenuItem.svelte b/src/assets/views/components/NavMenuItem.svelte index 4f104ed..b01d4c8 100644 --- a/src/assets/views/components/NavMenuItem.svelte +++ b/src/assets/views/components/NavMenuItem.svelte @@ -58,7 +58,7 @@ } } - :global(.feather) { + :global(.icon) { --icon-size: 16px; margin-right: 8px; } diff --git a/src/assets/views/utils/Field.svelte b/src/assets/views/utils/Field.svelte index 2fba537..c76df9a 100644 --- a/src/assets/views/utils/Field.svelte +++ b/src/assets/views/utils/Field.svelte @@ -96,7 +96,7 @@ background-color: var(--input); border-radius: 5px; - > :global(.feather.icon) { + > :global(.icon) { --icon-size: 24px; margin: 18px; opacity: 0.75; @@ -180,7 +180,7 @@ display: none; } - & + :global(.feather) { + & + :global(.icon) { position: absolute; pointer-events: none; right: 0; @@ -190,7 +190,7 @@ } // TODO: Temporary - &:focus + :global(.feather) { + &:focus + :global(.icon) { transform: rotateX(180deg); } } @@ -317,7 +317,7 @@ .name { font-size: 20px; - :global(.feather) { + :global(.icon) { --icon-size: 24px; margin-right: 8px; } diff --git a/src/assets/views/utils/Icon.svelte b/src/assets/views/utils/Icon.svelte index b17bd44..5063048 100644 --- a/src/assets/views/utils/Icon.svelte +++ b/src/assets/views/utils/Icon.svelte @@ -1,23 +1,17 @@