From 5e86b011dc8c4c68e31289082ebfb3f46fce3df1 Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Thu, 23 Feb 2023 15:48:01 +0100 Subject: [PATCH] Improve portfolio example icon support (#6343) --- examples/portfolio/src/components/Icon.astro | 1 + examples/portfolio/src/components/IconPaths.ts | 17 ++++++++++++++++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/examples/portfolio/src/components/Icon.astro b/examples/portfolio/src/components/Icon.astro index 661d6cccc..1eccb9991 100644 --- a/examples/portfolio/src/components/Icon.astro +++ b/examples/portfolio/src/components/Icon.astro @@ -25,6 +25,7 @@ const gradientId = 'icon-gradient-' + Math.round(Math.random() * 10e12).toString viewBox="0 0 256 256" aria-hidden="true" stroke={gradient ? `url(#${gradientId})` : color} + fill={gradient ? `url(#${gradientId})` : color} {...attrs} > diff --git a/examples/portfolio/src/components/IconPaths.ts b/examples/portfolio/src/components/IconPaths.ts index 0238c8358..f2e959f62 100644 --- a/examples/portfolio/src/components/IconPaths.ts +++ b/examples/portfolio/src/components/IconPaths.ts @@ -1,4 +1,15 @@ -/** Icons adapted from https://phosphoricons.com/ */ +/** + * Icons adapted from https://phosphoricons.com/ + * + * Want to add more? + * 1. Find the icon you want on Phosphor Icons. + * 2. Click “Copy SVG”. + * 3. Paste the SVG code in your editor. + * 4. Remove the `` wrapper so you only have elements like ``, ``, `` etc. + * 5. Remove any `stroke="#000000"` attributes + * 6. Replace any `fill="#000000"` attributes with `stroke="none"` + * (or add `stroke="none"` on shapes with no `fill` or `stroke` specified). + */ export const iconPaths = { 'terminal-window': ``, trophy: ``, @@ -20,4 +31,8 @@ export const iconPaths = { 'twitch-logo': ``, 'youtube-logo': ``, 'dribbble-logo': ``, + 'discord-logo': ``, + 'linkedin-logo': ``, + 'instagram-logo': ``, + 'tiktok-logo': ``, };