Change cog icon to iconify.

This commit is contained in:
Bradley Shellnut 2023-01-15 21:39:29 -08:00
parent c088048411
commit 4e07fc22f9
2 changed files with 13 additions and 7 deletions

View file

@ -1,8 +1,7 @@
<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 { CogIcon } from '@rgossiaux/svelte-heroicons/outline'; import Icon from '@iconify/svelte';
import { collectionStore } from '$root/lib/stores/collectionStore';
import Themes from './themes.svelte'; import Themes from './themes.svelte';
import GameCollection from './gameCollection.svelte'; import GameCollection from './gameCollection.svelte';
import GameWishlist from './gameWishlist.svelte'; import GameWishlist from './gameWishlist.svelte';
@ -11,7 +10,15 @@
<div class="container"> <div class="container">
<Popover let:open class="popover"> <Popover let:open class="popover">
<PopoverButton aria-label="Preferences"> <PopoverButton aria-label="Preferences">
<CogIcon width="24" height="24" /> <!-- <CogIcon width="24" height="24" /> -->
<Icon
icon="mdi:cog-outline"
width="24" height="24"
style={open ?
'transform: rotate(90deg); transition: transform 0.5s ease;'
: 'transform: rotate(0deg); transition: transform 0.5s ease;'
}
/>
</PopoverButton> </PopoverButton>
{#if open} {#if open}

View file

@ -2,10 +2,7 @@
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import { navigating } from '$app/stores'; import { navigating } from '$app/stores';
import debounce from 'just-debounce-it'; import debounce from 'just-debounce-it';
import clone from 'just-clone';
import { Toy } from '@leveluptuts/svelte-toy'; import { Toy } from '@leveluptuts/svelte-toy';
// import 'iconify-icon';
// import '../app.postcss';
import Analytics from '$lib/components/analytics.svelte'; import Analytics from '$lib/components/analytics.svelte';
import Header from '$lib/components/header/Header.svelte'; import Header from '$lib/components/header/Header.svelte';
import Loading from '$lib/components/loading.svelte'; import Loading from '$lib/components/loading.svelte';
@ -18,7 +15,9 @@
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 type { SavedGameType } from '$root/lib/types';
import type { SavedGameType } from '$root/lib/types';
$: { $: {
if ($navigating) { if ($navigating) {