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",
"format": "prettier --write .",
"format:check": "prettier --check .",
"generate:icons": "pnpx svgo -rf src/icons/svg -o src/icons/optimized",
"icons:build": "node ./src/icons/build.js",
"icons:generate": "node ./src/icons/optimize.js && node ./src/icons/build.js",
"icons:optimize": "node ./src/icons/optimize.js",

View File

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

View File

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

View File

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

View File

@@ -3,14 +3,12 @@
import type { SvelteHTMLElements } from 'svelte/elements';
import type { IconType } from './types';
type $$Props = {
icon?: IconType;
type Props = SvelteHTMLElements['span'] & {
class?: string;
} & SvelteHTMLElements['span'];
name?: IconType;
};
let className: $$Props['class'] = '';
export { className as class };
export let icon: $$Props['icon'] = 'arrow-right';
const { class: className = '', name = 'arrow-right', ...rest }: Props = $props();
</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 variant="text" aria-label="open navigation" onclick={toggleSidenav}>
{#if $layoutState.showSidenav}
<Icon aria-hidden="true" icon="close"></Icon>
<Icon aria-hidden="true" name="close"></Icon>
{:else}
<Icon aria-hidden="true" icon="hamburger-menu"></Icon>
<Icon aria-hidden="true" name="hamburger-menu"></Icon>
{/if}
</Button>
</div>
@@ -174,7 +174,7 @@
target="_blank"
rel="noopener noreferrer"
>
<Icon icon="star" aria-hidden="true"></Icon>
<Icon name="star" aria-hidden="true"></Icon>
<span class="text">Star on GitHub</span>
<InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag>
</Button>

View File

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

View File

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

View File

@@ -179,9 +179,9 @@
onclick={() => ($isMobileNavOpen = !$isMobileNavOpen)}
>
{#if $isMobileNavOpen}
<Icon aria-hidden="true" icon="close" />
<Icon aria-hidden="true" name="close" />
{:else}
<Icon aria-hidden="true" icon="hamburger-menu" />
<Icon aria-hidden="true" name="hamburger-menu" />
{/if}
</Button>
</div>
@@ -241,7 +241,7 @@
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>
<InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag>
</Button>

View File

@@ -52,7 +52,7 @@
<div class="web-integrations-top-section">
<div class="web-carousel-wrapper">
<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>
</Button>

View File

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

View File

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

View File

@@ -68,7 +68,7 @@
target="_blank"
>
{#if item.cta.icon}
<Icon icon={item.cta.icon} />
<Icon name={item.cta.icon} />
{/if}
{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">
<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>
</Button>
<Button
@@ -132,7 +132,7 @@
href="https://twitter.com/intent/tweet?text={twitterText}"
target="_blank"
>
<Icon icon="x" class="text-primary" />
<Icon name="x" class="text-primary" />
<span class="text">Share your ticket</span>
</Button>
</div>

View File

@@ -102,7 +102,7 @@
}}
disabled={!browser}
>
<Icon icon="github" class="text-primary" />
<Icon name="github" class="text-primary" />
<span class="text">(DEBUG) Log-out of GitHub</span>
</Button>
{/if}
@@ -112,7 +112,7 @@
Sign in with your GitHub account and see the magic happen in your ticket.
</p>
<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>
</Button>
{/if}
@@ -138,7 +138,7 @@
href={getAppwriteDashboardUrl(`/login?forceRedirect=${page.url.origin}/init-0/tickets`)}
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>
</Button>
{/if}

View File

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

View File

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

View File

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