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': ``, };