added material design icons

package-lock.json

@@ -13,6 +13,7 @@
 				"@astrojs/rss": "^3.0.0",
 				"@astrojs/sitemap": "^3.0.0",
 				"@astrojs/solid-js": "^3.0.1",
+				"@iconify-json/mdi": "^1.2.3",
 				"@netlify/functions": "^2.1.0",
 				"@sindresorhus/slugify": "^2.2.1",
 				"astro": "^3.2.0",
@@ -1430,6 +1431,15 @@
 			"integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==",
 			"license": "ISC"
 		},
+		"node_modules/@iconify-json/mdi": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.2.3.tgz",
+			"integrity": "sha512-O3cLwbDOK7NNDf2ihaQOH5F9JglnulNDFV7WprU2dSoZu3h3cWH//h74uQAB87brHmvFVxIOkuBX2sZSzYhScg==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@iconify/types": "*"
+			}
+		},
 		"node_modules/@iconify/tools": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/@iconify/tools/-/tools-4.1.2.tgz",
@@ -14574,6 +14584,14 @@
 			"resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
 			"integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg=="
 		},
+		"@iconify-json/mdi": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.2.3.tgz",
+			"integrity": "sha512-O3cLwbDOK7NNDf2ihaQOH5F9JglnulNDFV7WprU2dSoZu3h3cWH//h74uQAB87brHmvFVxIOkuBX2sZSzYhScg==",
+			"requires": {
+				"@iconify/types": "*"
+			}
+		},
 		"@iconify/tools": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/@iconify/tools/-/tools-4.1.2.tgz",

package.json

@@ -21,6 +21,7 @@
 		"@astrojs/rss": "^3.0.0",
 		"@astrojs/sitemap": "^3.0.0",
 		"@astrojs/solid-js": "^3.0.1",
+		"@iconify-json/mdi": "^1.2.3",
 		"@netlify/functions": "^2.1.0",
 		"@sindresorhus/slugify": "^2.2.1",
 		"astro": "^3.2.0",

src/components/ProjectItem.astro

@@ -12,45 +12,45 @@ const { data } = Astro.props as Props;
 const { icon, title, year, description, articleUrl, sourceUrl, demoUrl } = data;
 ---
 
-<div class="project-item">
-	<div class="project-item__heading">
+<div class='project-item'>
+	<div class='project-item__heading'>
 		<h2>
-			<Icon name={icon} width="20" height="20" />
+			<Icon name={icon} width='20' height='20' />
 			{title}
 		</h2>
 		<span>{year}</span>
 	</div>
-	<div class="project-item__description">
+	<div class='project-item__description'>
 		<p>{description}</p>
 	</div>
-	<div class="project-item__links">
+	<div class='project-item__links'>
 		{
 			articleUrl && (
-				<a class="btn-link" href={articleUrl} target="_blank">
+				<a class='btn-link' href={articleUrl} target='_blank'>
 					<UIString key={"btn.article"} />
 				</a>
 			)
 		}
 		{
 			sourceUrl && (
-				<a class="btn-link" href={sourceUrl} target="_blank">
+				<a class='btn-link' href={sourceUrl} target='_blank'>
 					<UIString key={"btn.sourceCode"} />
-					<Icon name="link-out" width="15" height="15" />
+					<Icon name='mdi:link-variant' width='15' height='15' />
 				</a>
 			)
 		}
 		{
 			demoUrl && (
-				<a class="btn-link" href={demoUrl} target="_blank">
+				<a class='btn-link' href={demoUrl} target='_blank'>
 					<UIString key={"btn.demo"} />
-					<Icon name="link-out" width="15" height="15" />
+					<Icon name='mdi:link-variant' width='15' height='15' />
 				</a>
 			)
 		}
 	</div>
 </div>
 
-<style lang="scss">
+<style lang='scss'>
 	.project-item {
 		display: flex;
 		flex-direction: column;

src/icons/link-out.svg

@@ -1,3 +0,0 @@
-<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.4375 6.5625L13.125 1.875M10 1.875H13.125V5M13.125 8.75V11.875C13.125 12.2065 12.9933 12.5245 12.7589 12.7589C12.5245 12.9933 12.2065 13.125 11.875 13.125H3.125C2.79348 13.125 2.47554 12.9933 2.24112 12.7589C2.0067 12.5245 1.875 12.2065 1.875 11.875V3.125C1.875 2.79348 2.0067 2.47554 2.24112 2.24112C2.47554 2.0067 2.79348 1.875 3.125 1.875H6.25" stroke="#21262D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>