fix: icons and twitter logo

package.json

@@ -29,15 +29,15 @@
 		"eslint-config-prettier": "^8.10.0",
 		"eslint-plugin-svelte": "^2.33.1",
 		"openapi-types": "^12.1.3",
-		"oslllo-svg-fixer": "^2.2.0",
+		"oslllo-svg-fixer": "^3.0.0",
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
 		"sass": "^1.66.1",
 		"svelte": "^4.2.0",
 		"svelte-check": "^3.5.1",
 		"svelte-markdoc-preprocess": "^0.3.2",
 		"svelte-sequential-preprocessor": "^2.0.1",
-		"svgtofont": "^3.25.4",
+		"svgtofont": "^4.0.0",
 		"tslib": "^2.6.2",
 		"typescript": "^5.2.2",
 		"vite": "^4.4.9",

src/icons/scripts.js

@@ -1,5 +1,6 @@
-import svgtofont from 'svgtofont';
+// @ts-expect-error missing types
 import SVGFixer from 'oslllo-svg-fixer';
+import svgtofont from 'svgtofont';
 import { resolve } from 'path';
 
 const src = resolve(process.cwd(), 'src/icons/svg');
@@ -25,9 +26,6 @@ export const generateIcons = async () => {
 		},
 		emptyDist: true,
 		generateInfoData: true,
-		svgoOptions: {
-			full: false
-		}
 	});
 };
 

src/icons/templates/_{{filename}}.css.template

@@ -11,7 +11,7 @@
 
 [class^="{{prefix}}-"], [class*=" {{prefix}}-"] {
     font-family: '{{fontname}}' !important;
-    font-size: {{fontSize}};
+    {{fontSize}}
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;

src/icons/templates/_{{filename}}.scss.template

@@ -9,7 +9,7 @@
 
 [class^="{{prefix}}-"], [class*=" {{prefix}}-"] {
   font-family: '{{fontname}}' !important;
-  font-size: {{fontSize}};
+  {{fontSize}}
   font-display: swap;
   font-style: normal;
   -webkit-font-smoothing: antialiased;

src/lib/animations/OpenSource.svelte

@@ -140,7 +140,7 @@
 				id="oss-twitter"
 			>
 				<div class="u-flex-vertical u-main-space-between u-gap-32">
-					<span class="aw-icon-twitter aw-u-font-size-40" aria-hidden="true" aria-label="Twitter" />
+					<span class="aw-icon-x aw-u-font-size-40" aria-hidden="true" aria-label="Twitter" />
 				</div>
 				<div class="aw-title u-margin-block-start-auto">125k+ Twitter Followers</div>
 			</div>

src/lib/components/MainFooter.svelte

@@ -19,7 +19,7 @@
 			link: 'https://github.com/appwrite'
 		},
 		{
-			icon: 'aw-icon-twitter',
+			icon: 'aw-icon-x',
 			link: 'https://twitter.com/appwrite'
 		},
 		{

src/markdoc/nodes/Fence.svelte

@@ -71,7 +71,7 @@
 								class="aw-icon-button"
 								aria-label="copy code from code-snippet"
 							>
-								<span class="icon-duplicate" aria-hidden="true" />
+								<span class="aw-icon-copy" aria-hidden="true" />
 							</button>
 							<svelte:fragment slot="tooltip">
 								{copyText}

src/markdoc/nodes/Heading.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext, hasContext, onMount } from 'svelte';
+	import { getContext, hasContext, onMount, setContext } from 'svelte';
 	import type { LayoutContext } from '../layouts/Article.svelte';
 
 	export let level: number;
@@ -41,7 +41,7 @@
 </script>
 
 {#if id}
-	<a href={`#${id}`}>
+	<a href={`#${id}`} class="aw-link">
 		<svelte:element
 			this={tag}
 			{id}

src/markdoc/nodes/Link.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { getContext, hasContext } from 'svelte';
+
 	export let href: string;
 	export let title: string;
 
@@ -7,4 +9,9 @@
 	const rel = isExternal ? 'noopener nofollow' : undefined;
 </script>
 
-<a class="aw-link" {href} {title} {target} {rel}><slot /></a>
+<a class="aw-link" {href} {title} {target} {rel}>
+	<slot />
+	{#if isExternal}
+		<!-- <span class="icon-cheveron-right" /> -->
+	{/if}
+</a>

src/routes/+page.svelte

@@ -228,7 +228,7 @@
 							<DeveloperCard
 								name="Eldad Fux"
 								tag="@eldadfux"
-								icon="twitter"
+								icon="x"
 								avatarSrc="/images/avatars/eldad.png"
 							>
 								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ultrices lacus.
@@ -252,7 +252,7 @@
 							<DeveloperCard
 								name="Eldad Fux"
 								tag="@eldadfux"
-								icon="twitter"
+								icon="x"
 								avatarSrc="/images/avatars/eldad.png"
 							>
 								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ultrices lacus.
@@ -274,7 +274,7 @@
 							<DeveloperCard
 								name="Eldad Fux"
 								tag="@eldadfux"
-								icon="twitter"
+								icon="x"
 								avatarSrc="/images/avatars/eldad.png"
 							>
 								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in <a

src/routes/DeveloperCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	export let name: string;
 	export let tag: string;
-	export let icon: 'twitter' | 'linkedin' | 'discord';
+	export let icon: 'x' | 'linkedin' | 'discord';
 	export let avatarSrc: string;
 </script>
 
@@ -13,7 +13,7 @@
 				<div class="aw-user-box-name aw-sub-body-500">{name}</div>
 				<div class="aw-user-box-username aw-sub-body-400">{tag}</div>
 			</div>
-			<span class="aw-social-item-icon icon-{icon}" aria-label={icon} aria-hidden="true" />
+			<span class="aw-social-item-icon aw-icon-{icon}" aria-label={icon} aria-hidden="true" />
 		</div>
 		<p class="aw-sub-body-500 aw-u-text-color-neutral-700">
 			<slot />

src/routes/blog/+page.svelte

@@ -101,7 +101,7 @@
 										aria-label="Author twitter"
 										target="_blank"
 									>
-										<span class="aw-icon-twitter" aria-hidden="true" />
+										<span class="aw-icon-x" aria-hidden="true" />
 									</a>
 								</li>
 								<li>

src/routes/blog/article/[slug]/+page.svelte

@@ -42,7 +42,7 @@
 											aria-label="Author twitter"
 											target="_blank"
 										>
-											<span class="aw-icon-twitter" aria-hidden="true" />
+											<span class="aw-icon-x" aria-hidden="true" />
 										</a>
 									</li>
 									<li>