Just using webcomponent version of iconify.

This commit is contained in:
Bradley Shellnut 2023-01-16 13:52:39 -08:00
parent 141ec7fae6
commit 3c845a7800
6 changed files with 76 additions and 91 deletions

View file

@ -1,68 +1,67 @@
{ {
"name": "boredgame", "name": "boredgame",
"version": "0.0.2", "version": "0.0.2",
"scripts": { "scripts": {
"dev": "NODE_OPTIONS=\"--inspect\" vite dev --host", "dev": "NODE_OPTIONS=\"--inspect\" vite dev --host",
"build": "vite build", "build": "vite build",
"package": "svelte-kit package", "package": "svelte-kit package",
"preview": "vite preview", "preview": "vite preview",
"test": "playwright test", "test": "playwright test",
"check": "svelte-check --tsconfig ./tsconfig.json", "check": "svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch", "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check --plugin-search-dir=. . && eslint .", "lint": "prettier --check --plugin-search-dir=. . && eslint .",
"format": "prettier --write --plugin-search-dir=. ." "format": "prettier --write --plugin-search-dir=. ."
}, },
"devDependencies": { "devDependencies": {
"@iconify-icons/line-md": "^1.2.21", "@iconify-icons/line-md": "^1.2.21",
"@iconify-icons/mdi": "^1.2.39", "@iconify-icons/mdi": "^1.2.39",
"@iconify/svelte": "^3.0.1", "@playwright/test": "^1.29.2",
"@playwright/test": "^1.29.2", "@rgossiaux/svelte-headlessui": "1.0.2",
"@rgossiaux/svelte-headlessui": "1.0.2", "@rgossiaux/svelte-heroicons": "^0.1.2",
"@rgossiaux/svelte-heroicons": "^0.1.2", "@sveltejs/adapter-auto": "^1.0.0",
"@sveltejs/adapter-auto": "^1.0.0", "@sveltejs/adapter-vercel": "^1.0.2",
"@sveltejs/adapter-vercel": "^1.0.2", "@sveltejs/kit": "^1.0.13",
"@sveltejs/kit": "^1.0.13", "@types/cookie": "^0.5.1",
"@types/cookie": "^0.5.1", "@types/node": "^18.11.18",
"@types/node": "^18.11.18", "@typescript-eslint/eslint-plugin": "^5.48.1",
"@typescript-eslint/eslint-plugin": "^5.48.1", "@typescript-eslint/parser": "^5.48.1",
"@typescript-eslint/parser": "^5.48.1", "autoprefixer": "^10.4.13",
"autoprefixer": "^10.4.13", "eslint": "^8.31.0",
"eslint": "^8.31.0", "eslint-config-prettier": "^8.6.0",
"eslint-config-prettier": "^8.6.0", "eslint-plugin-svelte3": "^4.0.0",
"eslint-plugin-svelte3": "^4.0.0", "just-clone": "^6.2.0",
"just-clone": "^6.2.0", "just-debounce-it": "^3.2.0",
"just-debounce-it": "^3.2.0", "postcss": "^8.4.21",
"postcss": "^8.4.21", "postcss-color-functional-notation": "^4.2.4",
"postcss-color-functional-notation": "^4.2.4", "postcss-custom-media": "^9.0.1",
"postcss-custom-media": "^9.0.1", "postcss-env-function": "^4.0.6",
"postcss-env-function": "^4.0.6", "postcss-import": "^15.1.0",
"postcss-import": "^15.1.0", "postcss-load-config": "^4.0.1",
"postcss-load-config": "^4.0.1", "postcss-media-minmax": "^5.0.0",
"postcss-media-minmax": "^5.0.0", "postcss-nested": "^6.0.0",
"postcss-nested": "^6.0.0", "prettier": "^2.8.2",
"prettier": "^2.8.2", "prettier-plugin-svelte": "^2.9.0",
"prettier-plugin-svelte": "^2.9.0", "sass": "^1.57.1",
"sass": "^1.57.1", "svelte": "^3.55.1",
"svelte": "^3.55.1", "svelte-check": "^2.10.3",
"svelte-check": "^2.10.3", "svelte-preprocess": "^4.10.7",
"svelte-preprocess": "^4.10.7", "tslib": "^2.4.1",
"tslib": "^2.4.1", "typescript": "^4.9.4",
"typescript": "^4.9.4", "vite": "^4.0.4",
"vite": "^4.0.4", "vitest": "^0.25.3"
"vitest": "^0.25.3" },
}, "type": "module",
"type": "module", "dependencies": {
"dependencies": { "@fontsource/fira-mono": "^4.5.10",
"@fontsource/fira-mono": "^4.5.10", "@leveluptuts/svelte-side-menu": "^1.0.5",
"@leveluptuts/svelte-side-menu": "^1.0.5", "@leveluptuts/svelte-toy": "^2.0.3",
"@leveluptuts/svelte-toy": "^2.0.3", "@lukeed/uuid": "^2.0.0",
"@lukeed/uuid": "^2.0.0", "@types/feather-icons": "^4.29.1",
"@types/feather-icons": "^4.29.1", "cookie": "^0.5.0",
"cookie": "^0.5.0", "feather-icons": "^4.29.0",
"feather-icons": "^4.29.0", "iconify-icon": "^1.0.2",
"iconify-icon": "^1.0.2", "svelte-lazy-loader": "^1.0.0",
"svelte-lazy-loader": "^1.0.0", "zod": "^3.20.2",
"zod": "^3.20.2", "zod-to-json-schema": "^3.20.2"
"zod-to-json-schema": "^3.20.2" }
} }
}

View file

@ -4,7 +4,6 @@ specifiers:
'@fontsource/fira-mono': ^4.5.10 '@fontsource/fira-mono': ^4.5.10
'@iconify-icons/line-md': ^1.2.21 '@iconify-icons/line-md': ^1.2.21
'@iconify-icons/mdi': ^1.2.39 '@iconify-icons/mdi': ^1.2.39
'@iconify/svelte': ^3.0.1
'@leveluptuts/svelte-side-menu': ^1.0.5 '@leveluptuts/svelte-side-menu': ^1.0.5
'@leveluptuts/svelte-toy': ^2.0.3 '@leveluptuts/svelte-toy': ^2.0.3
'@lukeed/uuid': ^2.0.0 '@lukeed/uuid': ^2.0.0
@ -66,7 +65,6 @@ dependencies:
devDependencies: devDependencies:
'@iconify-icons/line-md': 1.2.21 '@iconify-icons/line-md': 1.2.21
'@iconify-icons/mdi': 1.2.39 '@iconify-icons/mdi': 1.2.39
'@iconify/svelte': 3.0.1_svelte@3.55.1
'@playwright/test': 1.29.2 '@playwright/test': 1.29.2
'@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.55.1 '@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.55.1
'@rgossiaux/svelte-heroicons': 0.1.2_svelte@3.55.1 '@rgossiaux/svelte-heroicons': 0.1.2_svelte@3.55.1
@ -380,15 +378,6 @@ packages:
'@iconify/types': 2.0.0 '@iconify/types': 2.0.0
dev: true dev: true
/@iconify/svelte/3.0.1_svelte@3.55.1:
resolution: {integrity: sha512-onjjl496hTXUBWJxeCxo/c5zmVHS3HnKUQv5Cqf1ZsUbY4d0wVJfSDaV1hw1m6b0BNlJCOmbpc23Q6AOO5qqKg==}
peerDependencies:
svelte: '>=3'
dependencies:
'@iconify/types': 2.0.0
svelte: 3.55.1
dev: true
/@iconify/types/2.0.0: /@iconify/types/2.0.0:
resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}

View file

@ -2,7 +2,6 @@
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { Image } from 'svelte-lazy-loader'; import { Image } from 'svelte-lazy-loader';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import Icon from '@iconify/svelte/dist/OfflineIcon.svelte';
import plusCircle from '@iconify-icons/line-md/plus-circle'; import plusCircle from '@iconify-icons/line-md/plus-circle';
import minusCircle from '@iconify-icons/line-md/minus-circle'; import minusCircle from '@iconify-icons/line-md/minus-circle';
import Button from '$lib/components/button/index.svelte'; import Button from '$lib/components/button/index.svelte';
@ -100,17 +99,17 @@
<Button size="md" kind={existsInCollection ? 'danger' : 'primary'} icon on:click={onCollectionClick}> <Button size="md" kind={existsInCollection ? 'danger' : 'primary'} icon on:click={onCollectionClick}>
{collectionText} {collectionText}
{#if existsInCollection} {#if existsInCollection}
<Icon icon={minusCircle} width="24" height="24" /> <iconify-icon icon={minusCircle} width="24" height="24" />
{:else} {:else}
<Icon icon={plusCircle} width="24" height="24" /> <iconify-icon icon={plusCircle} width="24" height="24" />
{/if} {/if}
</Button> </Button>
<Button size="md" kind={existsInWishlist ? 'danger' : 'primary'} icon on:click={onWishlistClick}> <Button size="md" kind={existsInWishlist ? 'danger' : 'primary'} icon on:click={onWishlistClick}>
{wishlistText} {wishlistText}
{#if existsInWishlist} {#if existsInWishlist}
<Icon icon={minusCircle} width="24" height="24" /> <iconify-icon icon={minusCircle} width="24" height="24" />
{:else} {:else}
<Icon icon={plusCircle} width="24" height="24" /> <iconify-icon icon={plusCircle} width="24" height="24" />
{/if} {/if}
</Button> </Button>
</div> </div>

View file

@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import { Popover, PopoverButton, PopoverPanel } from '@rgossiaux/svelte-headlessui'; import { Popover, PopoverButton, PopoverPanel } from '@rgossiaux/svelte-headlessui';
import Icon from '@iconify/svelte/dist/OfflineIcon.svelte';
import cogOutline from '@iconify-icons/mdi/cog-outline'; import cogOutline from '@iconify-icons/mdi/cog-outline';
import Themes from './themes.svelte'; import Themes from './themes.svelte';
import GameCollection from './gameCollection.svelte'; import GameCollection from './gameCollection.svelte';
@ -19,7 +18,7 @@
: 'transform: rotate(0deg); transition: transform 0.5s ease;' : 'transform: rotate(0deg); transition: transform 0.5s ease;'
} }
></iconify-icon> --> ></iconify-icon> -->
<Icon <iconify-icon
icon={cogOutline} icon={cogOutline}
width="24" height="24" width="24" height="24"
style={open ? style={open ?

View file

@ -15,7 +15,7 @@
import { toast } from '$lib/components/toast/toast'; import { toast } from '$lib/components/toast/toast';
import Toast from '$lib/components/toast/Toast.svelte'; import Toast from '$lib/components/toast/Toast.svelte';
import '$root/styles/styles.pcss'; import '$root/styles/styles.pcss';
// import 'iconify-icon'; import 'iconify-icon';
import type { SavedGameType } from '$root/lib/types'; import type { SavedGameType } from '$root/lib/types';

View file

@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import { fade, fly } from 'svelte/transition'; import { fade, fly } from 'svelte/transition';
import { Image } from 'svelte-lazy-loader'; import { Image } from 'svelte-lazy-loader';
import Icon from '@iconify/svelte/dist/OfflineIcon.svelte';
import minusCircle from '@iconify-icons/line-md/minus-circle'; import minusCircle from '@iconify-icons/line-md/minus-circle';
import plusCircle from '@iconify-icons/line-md/plus-circle'; import plusCircle from '@iconify-icons/line-md/plus-circle';
import { import {
@ -117,17 +116,17 @@
<Button size="md" kind={existsInCollection ? 'danger' : 'primary'} icon on:click={onCollectionClick}> <Button size="md" kind={existsInCollection ? 'danger' : 'primary'} icon on:click={onCollectionClick}>
{collectionText} {collectionText}
{#if existsInCollection} {#if existsInCollection}
<Icon icon={minusCircle} width="24" height="24" /> <iconify-icon icon={minusCircle} width="24" height="24" />
{:else} {:else}
<Icon icon={plusCircle} width="24" height="24" /> <iconify-icon icon={plusCircle} width="24" height="24" />
{/if} {/if}
</Button> </Button>
<Button size="md" kind={existsInWishlist ? 'danger' : 'primary'} icon on:click={onWishlistClick}> <Button size="md" kind={existsInWishlist ? 'danger' : 'primary'} icon on:click={onWishlistClick}>
{wishlistText} {wishlistText}
{#if existsInWishlist} {#if existsInWishlist}
<Icon icon={minusCircle} width="24" height="24" /> <iconify-icon icon={minusCircle} width="24" height="24" />
{:else} {:else}
<Icon icon={plusCircle} width="24" height="24" /> <iconify-icon icon={plusCircle} width="24" height="24" />
{/if} {/if}
</Button> </Button>
</div> </div>