update icon

This commit is contained in:
Jesse Winton
2025-04-08 16:56:12 -04:00
parent 395ebe0da6
commit 733dceb1c1
18 changed files with 53 additions and 62 deletions

View File

@@ -12,6 +12,7 @@
"download-contributors": "node ./scripts/download-contributor-data.js", "download-contributors": "node ./scripts/download-contributor-data.js",
"format": "prettier --write .", "format": "prettier --write .",
"format:check": "prettier --check .", "format:check": "prettier --check .",
"generate:icons": "pnpx svgo -rf src/icons/svg -o src/icons/optimized",
"icons:build": "node ./src/icons/build.js", "icons:build": "node ./src/icons/build.js",
"icons:generate": "node ./src/icons/optimize.js && node ./src/icons/build.js", "icons:generate": "node ./src/icons/optimize.js && node ./src/icons/build.js",
"icons:optimize": "node ./src/icons/optimize.js", "icons:optimize": "node ./src/icons/optimize.js",

View File

@@ -23,9 +23,8 @@
}} }}
> >
Appwrite in 100 seconds Appwrite in 100 seconds
{#snippet icon()}
<Icon icon="play" /> <Icon name="play" />
{/snippet}
</Button> </Button>
{#if $open} {#if $open}
<div use:melt={$portalled}> <div use:melt={$portalled}>

View File

@@ -9,6 +9,6 @@
</script> </script>
<Button variant="secondary" class={className} href="https://appwrite.io/discord"> <Button variant="secondary" class={className} href="https://appwrite.io/discord">
<Icon icon="discord" /> <Icon name="discord" />
<span class="text">Join Discord</span> <span class="text">Join Discord</span>
</Button> </Button>

View File

@@ -16,7 +16,7 @@
class={className} class={className}
variant="secondary" variant="secondary"
> >
<Icon icon="star" aria-hidden="true" /> <Icon name="star" aria-hidden="true" />
<span class="text">Star on GitHub</span> <span class="text">Star on GitHub</span>
<InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag> <InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag>
</Button> </Button>

View File

@@ -3,14 +3,12 @@
import type { SvelteHTMLElements } from 'svelte/elements'; import type { SvelteHTMLElements } from 'svelte/elements';
import type { IconType } from './types'; import type { IconType } from './types';
type $$Props = { type Props = SvelteHTMLElements['span'] & {
icon?: IconType;
class?: string; class?: string;
} & SvelteHTMLElements['span']; name?: IconType;
};
let className: $$Props['class'] = ''; const { class: className = '', name = 'arrow-right', ...rest }: Props = $props();
export { className as class };
export let icon: $$Props['icon'] = 'arrow-right';
</script> </script>
<span class={classNames(`web-icon-${icon}`, className)} {...$$restProps}></span> <span class={classNames(`web-icon-${name}`, className)} {...rest}></span>

View File

@@ -111,9 +111,9 @@
</Button> </Button>
<Button variant="text" aria-label="open navigation" onclick={toggleSidenav}> <Button variant="text" aria-label="open navigation" onclick={toggleSidenav}>
{#if $layoutState.showSidenav} {#if $layoutState.showSidenav}
<Icon aria-hidden="true" icon="close"></Icon> <Icon aria-hidden="true" name="close"></Icon>
{:else} {:else}
<Icon aria-hidden="true" icon="hamburger-menu"></Icon> <Icon aria-hidden="true" name="hamburger-menu"></Icon>
{/if} {/if}
</Button> </Button>
</div> </div>
@@ -174,7 +174,7 @@
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<Icon icon="star" aria-hidden="true"></Icon> <Icon name="star" aria-hidden="true"></Icon>
<span class="text">Star on GitHub</span> <span class="text">Star on GitHub</span>
<InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag> <InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag>
</Button> </Button>

View File

@@ -54,7 +54,7 @@
variant="icon" variant="icon"
> >
<Icon <Icon
icon="chevron-left" name="chevron-left"
class="text-primary hidden text-[24px] md:flex" class="text-primary hidden text-[24px] md:flex"
aria-hidden="true" aria-hidden="true"
/> />

View File

@@ -135,7 +135,7 @@
aria-label="previous page" aria-label="previous page"
> >
<Icon <Icon
icon="chevron-left" name="chevron-left"
class="text-primary text-2xl" class="text-primary text-2xl"
aria-hidden="true" aria-hidden="true"
/> />
@@ -171,7 +171,7 @@
href={prevStep.href} href={prevStep.href}
class="previous-step-anchor" class="previous-step-anchor"
> >
<Icon icon="chevron-left" aria-hidden="true" /> <Icon name="chevron-left" aria-hidden="true" />
<span class="web-sub-body-500"> <span class="web-sub-body-500">
Step {prevStep.step}<span class="web-is-not-mobile" Step {prevStep.step}<span class="web-is-not-mobile"
>: {getCorrectTitle(prevStep, 1)}</span >: {getCorrectTitle(prevStep, 1)}</span
@@ -279,13 +279,6 @@
padding-inline-start: unset; padding-inline-start: unset;
} }
.previous-step-anchor {
border: unset;
outline: unset;
background: unset;
padding-inline-start: unset;
}
.u-margin-block-start-16 { .u-margin-block-start-16 {
margin-block-start: 1rem; margin-block-start: 1rem;
} }

View File

@@ -179,9 +179,9 @@
onclick={() => ($isMobileNavOpen = !$isMobileNavOpen)} onclick={() => ($isMobileNavOpen = !$isMobileNavOpen)}
> >
{#if $isMobileNavOpen} {#if $isMobileNavOpen}
<Icon aria-hidden="true" icon="close" /> <Icon aria-hidden="true" name="close" />
{:else} {:else}
<Icon aria-hidden="true" icon="hamburger-menu" /> <Icon aria-hidden="true" name="hamburger-menu" />
{/if} {/if}
</Button> </Button>
</div> </div>
@@ -241,7 +241,7 @@
posthog: { name: 'github-stars_nav_click' } posthog: { name: 'github-stars_nav_click' }
})} })}
> >
<Icon icon="star" aria-hidden="true" /> <Icon name="star" aria-hidden="true" />
<span class="text">Star on GitHub</span> <span class="text">Star on GitHub</span>
<InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag> <InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag>
</Button> </Button>

View File

@@ -52,7 +52,7 @@
<div class="web-integrations-top-section"> <div class="web-integrations-top-section">
<div class="web-carousel-wrapper"> <div class="web-carousel-wrapper">
<Button variant="text" href="/integrations" class="mb-12"> <Button variant="text" href="/integrations" class="mb-12">
<Icon icon="chevron-left" aria-hidden="true" /> <Icon name="chevron-left" aria-hidden="true" />
<span>Back to catalog</span> <span>Back to catalog</span>
</Button> </Button>

View File

@@ -87,7 +87,7 @@
</p> </p>
<Button href="/assets.zip" download> <Button href="/assets.zip" download>
<Icon icon="download" aria-hidden="true" /> <Icon name="download" aria-hidden="true" />
<span>Download assets</span> <span>Download assets</span>
</Button> </Button>
</section> </section>
@@ -139,7 +139,7 @@
href="/assets/logotype/white.svg" href="/assets/logotype/white.svg"
download download
> >
<Icon icon="download" aria-label="download" /> <Icon name="download" aria-label="download" />
<span>SVG</span> <span>SVG</span>
</Button> </Button>
<Button <Button
@@ -147,7 +147,7 @@
href="/assets/logotype/white.png" href="/assets/logotype/white.png"
download download
> >
<Icon icon="download" aria-label="download" /> <Icon name="download" aria-label="download" />
<span>PNG</span> <span>PNG</span>
</Button> </Button>
</div> </div>
@@ -167,7 +167,7 @@
href="/assets/logotype/black.svg" href="/assets/logotype/black.svg"
download download
> >
<Icon icon="download" aria-label="download" /> <Icon name="download" aria-label="download" />
<span>SVG</span> <span>SVG</span>
</Button> </Button>
<Button <Button
@@ -175,7 +175,7 @@
href="/assets/logotype/black.png" href="/assets/logotype/black.png"
download download
> >
<Icon icon="download" aria-label="download" /> <Icon name="download" aria-label="download" />
<span>PNG</span> <span>PNG</span>
</Button> </Button>
</div> </div>
@@ -236,7 +236,7 @@
href="/assets/logomark/logo.svg" href="/assets/logomark/logo.svg"
download download
> >
<Icon icon="download" aria-label="download" /> <Icon name="download" aria-label="download" />
<span>SVG</span> <span>SVG</span>
</Button> </Button>
<Button <Button
@@ -244,7 +244,7 @@
href="/assets/logomark/logo.png" href="/assets/logomark/logo.png"
download download
> >
<Icon icon="download" aria-label="download" /> <Icon name="download" aria-label="download" />
<span>PNG</span> <span>PNG</span>
</Button> </Button>
</div> </div>
@@ -264,7 +264,7 @@
href="/assets/logomark/logo.svg" href="/assets/logomark/logo.svg"
download download
> >
<Icon icon="download" aria-label="download" /> <Icon name="download" aria-label="download" />
<span>SVG</span> <span>SVG</span>
</Button> </Button>
<Button <Button
@@ -272,7 +272,7 @@
href="/assets/logomark/logo.png" href="/assets/logomark/logo.png"
download download
> >
<Icon icon="download" aria-label="download" /> <Icon name="download" aria-label="download" />
<span>PNG</span> <span>PNG</span>
</Button> </Button>
</div> </div>
@@ -373,7 +373,7 @@
href="/assets/visuals/dashboard.jpg" href="/assets/visuals/dashboard.jpg"
download download
> >
<Icon icon="download" aria-label="download" /> <Icon name="download" aria-label="download" />
<span>JPG</span> <span>JPG</span>
</Button> </Button>
<Button <Button
@@ -381,7 +381,7 @@
href={'/assets/visuals/dashboard.png'} href={'/assets/visuals/dashboard.png'}
download download
> >
<Icon icon="download" aria-label="download" /> <Icon name="download" aria-label="download" />
<span>PNG</span> <span>PNG</span>
</Button> </Button>
</div> </div>
@@ -398,7 +398,7 @@
href="/assets/visuals/auth.jpg" href="/assets/visuals/auth.jpg"
download download
> >
<Icon icon="download" aria-label="download" /> <Icon name="download" aria-label="download" />
<span>JPG</span> <span>JPG</span>
</Button> </Button>
<Button <Button
@@ -406,7 +406,7 @@
href={'/assets/visuals/auth.png'} href={'/assets/visuals/auth.png'}
download download
> >
<Icon icon="download" aria-label="download" /> <Icon name="download" aria-label="download" />
<span>PNG</span> <span>PNG</span>
</Button> </Button>
</div> </div>
@@ -423,7 +423,7 @@
href="/assets/visuals/databases.jpg" href="/assets/visuals/databases.jpg"
download download
> >
<Icon icon="download" aria-label="download" /> <Icon name="download" aria-label="download" />
<span>JPG</span> <span>JPG</span>
</Button> </Button>
<Button <Button
@@ -431,7 +431,7 @@
href={'/assets/visuals/databases.png'} href={'/assets/visuals/databases.png'}
download download
> >
<Icon icon="download" aria-label="download" /> <Icon name="download" aria-label="download" />
<span>PNG</span> <span>PNG</span>
</Button> </Button>
</div> </div>
@@ -449,7 +449,7 @@
href="/assets/visuals/storage.jpg" href="/assets/visuals/storage.jpg"
download download
> >
<Icon icon="download" aria-label="download" /> <Icon name="download" aria-label="download" />
<span>JPG</span> <span>JPG</span>
</Button> </Button>
<Button <Button
@@ -457,7 +457,7 @@
href={'/assets/visuals/storage.png'} href={'/assets/visuals/storage.png'}
download download
> >
<Icon icon="download" aria-label="download" /> <Icon name="download" aria-label="download" />
<span>PNG</span> <span>PNG</span>
</Button> </Button>
</div> </div>
@@ -475,7 +475,7 @@
href="/assets/visuals/functions.jpg" href="/assets/visuals/functions.jpg"
download download
> >
<Icon icon="download" aria-label="download" /> <Icon name="download" aria-label="download" />
<span>JPG</span> <span>JPG</span>
</Button> </Button>
<Button <Button
@@ -483,7 +483,7 @@
href={'/assets/visuals/functions.png'} href={'/assets/visuals/functions.png'}
download download
> >
<Icon icon="download" aria-label="download" /> <Icon name="download" aria-label="download" />
<span>PNG</span> <span>PNG</span>
</Button> </Button>
</div> </div>
@@ -500,7 +500,7 @@
href="/assets/visuals/messaging.jpg" href="/assets/visuals/messaging.jpg"
download download
> >
<Icon icon="download" aria-label="download" /> <Icon name="download" aria-label="download" />
<span>JPG</span> <span>JPG</span>
</Button> </Button>
<Button <Button
@@ -508,7 +508,7 @@
href={'/assets/visuals/messaging.png'} href={'/assets/visuals/messaging.png'}
download download
> >
<Icon icon="download" aria-label="download" /> <Icon name="download" aria-label="download" />
<span>PNG</span> <span>PNG</span>
</Button> </Button>
</div> </div>

View File

@@ -184,7 +184,7 @@
rel="noopener noreferrer" rel="noopener noreferrer"
class="is-full-width-mobile" class="is-full-width-mobile"
> >
<Icon icon="star" aria-hidden="true" /> <Icon name="star" aria-hidden="true" />
<span>Star on GitHub</span> <span>Star on GitHub</span>
<InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag> <InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag>
</Button> </Button>
@@ -286,7 +286,7 @@
class="mt-8" class="mt-8"
variant="secondary" variant="secondary"
> >
<Icon icon="github" aria-hidden="true" /> <Icon name="github" aria-hidden="true" />
<span class="">View all Open Issues</span> <span class="">View all Open Issues</span>
</Button> </Button>
</div> </div>

View File

@@ -68,7 +68,7 @@
target="_blank" target="_blank"
> >
{#if item.cta.icon} {#if item.cta.icon}
<Icon icon={item.cta.icon} /> <Icon name={item.cta.icon} />
{/if} {/if}
{item.cta.label}</Button {item.cta.label}</Button
> >

View File

@@ -123,7 +123,7 @@
<div class="u-flex u-cross-center u-gap-16 u-margin-block-start-16"> <div class="u-flex u-cross-center u-gap-16 u-margin-block-start-16">
<Button variant="secondary" class="is-full-width" onclick={copy}> <Button variant="secondary" class="is-full-width" onclick={copy}>
<Icon icon={$copied ? 'check' : 'copy'} class="text-primary" /> <Icon name={$copied ? 'check' : 'copy'} class="text-primary" />
<span class="text">Copy ticket URL</span> <span class="text">Copy ticket URL</span>
</Button> </Button>
<Button <Button
@@ -132,7 +132,7 @@
href="https://twitter.com/intent/tweet?text={twitterText}" href="https://twitter.com/intent/tweet?text={twitterText}"
target="_blank" target="_blank"
> >
<Icon icon="x" class="text-primary" /> <Icon name="x" class="text-primary" />
<span class="text">Share your ticket</span> <span class="text">Share your ticket</span>
</Button> </Button>
</div> </div>

View File

@@ -102,7 +102,7 @@
}} }}
disabled={!browser} disabled={!browser}
> >
<Icon icon="github" class="text-primary" /> <Icon name="github" class="text-primary" />
<span class="text">(DEBUG) Log-out of GitHub</span> <span class="text">(DEBUG) Log-out of GitHub</span>
</Button> </Button>
{/if} {/if}
@@ -112,7 +112,7 @@
Sign in with your GitHub account and see the magic happen in your ticket. Sign in with your GitHub account and see the magic happen in your ticket.
</p> </p>
<Button class="is-full-width u-margin-block-start-24" onclick={loginGithub} variant="secondary"> <Button class="is-full-width u-margin-block-start-24" onclick={loginGithub} variant="secondary">
<Icon icon="github" class="text-primary" /> <Icon name="github" class="text-primary" />
<span class="text">Log in to GitHub account</span> <span class="text">Log in to GitHub account</span>
</Button> </Button>
{/if} {/if}
@@ -138,7 +138,7 @@
href={getAppwriteDashboardUrl(`/login?forceRedirect=${page.url.origin}/init-0/tickets`)} href={getAppwriteDashboardUrl(`/login?forceRedirect=${page.url.origin}/init-0/tickets`)}
class="is-full-width u-margin-block-start-24" class="is-full-width u-margin-block-start-24"
> >
<Icon icon="appwrite" class="text-primary" /> <Icon name="appwrite" class="text-primary" />
<span class="text">Log in to Appwrite account</span> <span class="text">Log in to Appwrite account</span>
</Button> </Button>
{/if} {/if}

View File

@@ -161,7 +161,7 @@
<tr> <tr>
<td colspan={headings.length + 1} class="py-2 pl-4 md:py-4"> <td colspan={headings.length + 1} class="py-2 pl-4 md:py-4">
<Button variant="text" class="is-small"> <Button variant="text" class="is-small">
<Icon icon="plus" aria-hidden="true"></Icon> <Icon name="plus" aria-hidden="true"></Icon>
Add role Add role
</Button> </Button>
</td> </td>

View File

@@ -13,7 +13,7 @@
Get community support by joining our Discord server. Get community support by joining our Discord server.
</p> </p>
<Button class="mt-6" href="https://appwrite.io/discord"> <Button class="mt-6" href="https://appwrite.io/discord">
<Icon icon="discord"></Icon> <Icon name="discord"></Icon>
Join Discord Join Discord
</Button> </Button>
</div> </div>

View File

@@ -59,7 +59,7 @@
</div> </div>
<div class="buttons"> <div class="buttons">
<Button href={discordLink}> <Button href={discordLink}>
<Icon icon="discord"></Icon> <Icon name="discord"></Icon>
View on Discord View on Discord
</Button> </Button>
</div> </div>
@@ -84,7 +84,7 @@
Reply to this thread by joining our Discord Reply to this thread by joining our Discord
</p> </p>
<Button class="mt-6" href={discordLink}> <Button class="mt-6" href={discordLink}>
<Icon icon="discord"></Icon> <Icon name="discord"></Icon>
Reply on Discord Reply on Discord
</Button> </Button>
</div> </div>