How do you make custom icons? | Astro Lounge | Page 1

royal rose Feb 5, 2024, 6:51 AM

#

I want to use <Icon ..> for a custom svg

sly prism Feb 5, 2024, 8:12 AM

#

I use iconify https://iconify.design/docs/usage/css/ to do so

or You can use https://www.astroicon.dev/getting-started/

Iconify

All popular icon sets, one framework

Astro Icon

Getting Started

Learn how to add Astro Icon to your existing Astro project.

desert echo Feb 5, 2024, 8:16 AM

#

yeah I will vote for astro-icon for the sheer simplicity when it comes to using them

royal rose Feb 5, 2024, 8:16 AM

#

sly prism I use iconify https://iconify.design/docs/usage/css/ to do so or You can use ht...

nono, not 3rd party, custom. im a designer

#

as in i just exported an svg from adobe illustrator and want to use it like <Icon ..>

#

i think astro-icon is what i need. it shows just what i need https://www.astroicon.dev/getting-started/

Astro Icon

Getting Started

Learn how to add Astro Icon to your existing Astro project.

#

i am spending way too much time trying to override Icon, but it looks like its "internal" and not "exposed"

desert echo Feb 5, 2024, 8:20 AM

#

what properties are you trying to override

royal rose Feb 5, 2024, 8:20 AM

#

the Icon compontent

#

i guess thats not how it works

pale lotus Feb 5, 2024, 9:04 AM

#

Example of icon component (downloaded from icones.js.org)


---
const props = Astro.props 
---

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32" {...props}><path fill="url(#vscodeIconsFileTypeAstro0)" d="M11.025 20.499c-.532 1.75-.154 4.184 1.105 5.331v-.042l.042-.112c.154-.741.756-1.203 1.526-1.175c.713.014 1.12.392 1.217 1.217c.042.308.042.616.056.938v.098c0 .7.196 1.371.588 1.959c.35.56.84.993 1.497 1.287l-.028-.056l-.028-.112c-.49-1.469-.14-2.49 1.147-3.358l.392-.266l.868-.573a4.254 4.254 0 0 0 1.791-3.037c.07-.532 0-1.05-.154-1.553l-.21.14c-1.945 1.035-4.17 1.4-6.325.98c-1.301-.197-2.56-.56-3.498-1.652z"/><path fill="#fff" d="M4.925 20.191s3.736-1.82 7.486-1.82l2.84-8.759c.098-.42.406-.7.756-.7s.644.28.756.714l2.826 8.746c4.45 0 7.487 1.82 7.487 1.82L20.709 2.84c-.168-.518-.49-.84-.896-.84h-7.612c-.406 0-.7.322-.896.84z"/><defs><linearGradient id="vscodeIconsFileTypeAstro0" x1="8.19" x2="16.91" y1="23" y2="18.89" gradientTransform="translate(-.673 -2.198)scale(1.3993)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>

You can create component like that and just import it.

wraith grove Feb 5, 2024, 9:17 AM

#

With astro-icon, you can place your svgs in a specific folder in src, and use the <Icon /> component. Super easy.

royal rose Feb 5, 2024, 9:17 AM

#

i had issues with astro-icon and it not being inline no matter what

#

using the same method as the regular icon package

#

@tailwind base;
@tailwind components;
@tailwind utilities;

.inline-icon {
    @apply inline-block align-middle !important;
}

#

it had an extra margin or something

royal rose Feb 5, 2024, 9:27 AM

#

pale lotus Example of icon component (downloaded from `icones.js.org`) ```html --- const p...

im not sure why this isnt working

my .mdx
import { Icon } from '../../components'

my Icon.astro
---
const props = Astro.props;
---

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" {...props}>
    <g data-name="a" style="isolation:isolate">
        ...
    </g>
</svg>

pale lotus Feb 5, 2024, 9:28 AM

#

import AwesomeIconName from '../../components' ? Should be without brackets I think

royal rose Feb 5, 2024, 9:30 AM

#

pale lotus `import AwesomeIconName from '../../components'` ? Should be without brackets I ...

well this is my issue

Failed to load url ../../components (resolved id: ../../components) in C:/Users/.../Docs/src/content/docs/client-setup.mdx. Does the file exist?
  Stack trace:
    at C:/Users/.../Docs/src/content/docs/client-setup.mdx?astroPropagatedAssets

pale lotus Feb 5, 2024, 9:31 AM

#

did you have the same error with brackets?

royal rose Feb 5, 2024, 9:31 AM

#

yeah

pale lotus Feb 5, 2024, 9:31 AM

#

that means Path is incorrect

#

Failed to load url ../../components

#

sorry

#

whats the name of file?

royal rose Feb 5, 2024, 9:32 AM

#

Icon.astro

pale lotus Feb 5, 2024, 9:32 AM

#

import AwesomeIconName from '../../components/Icon.astro'

royal rose Feb 5, 2024, 9:32 AM

#

wait wheres AwesomeIconName coming from? there's no icon name defined

pale lotus Feb 5, 2024, 9:33 AM

#

you can set whatever name you want, if component have one default export

#

it doesnt matter really ;p

#

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#syntax

MDN Web Docs

import - JavaScript | MDN

The static import declaration is used to import read-only live bindings which are exported by another module. The imported bindings are called live bindings because they are updated by the module that exported the binding, but cannot be re-assigned by the importing module.

royal rose Feb 5, 2024, 9:36 AM

#

so this?

import { Icon } from '../../components/Icon.astro'

it's giving me this error, showing that its somehow messing with other svg files?

01:33:58 [ERROR] [InvalidContentEntryFrontmatterError] docs → index.mdx frontmatter does not match collection schema.
hero.image: Did not match union:
  Hint:
    See https://docs.astro.build/en/guides/content-collections/ for more information on content schemas.
  Error reference:
    https://docs.astro.build/en/reference/errors/invalid-content-entry-frontmatter-error/
  Stack trace:
    at C:/Users/.../Docs/src/content/docs/index.mdx
    [...] See full stack trace in the browser, or rerun with --verbose.

#

wait nvm ignore that i forgot a renamed the hero image

#

new error nice /s

01:37:01 [ERROR] Unable to render /client-setup because it contains an undefined Component!
Did you forget to import the component or is it possible there is a typo?
  Stack trace:
    at C:\Users\...\eval at instantiateModule (file:\C:\Users\...\Docs\node_modules\vite\dist\node\chunks\dep-9A4-l-43.js:50858:28

#

okay that time it was because of the { }

pale lotus Feb 5, 2024, 9:40 AM

#

yes

royal rose Feb 5, 2024, 9:40 AM

#

fixed, but the style is all weird ugh

#

how can I give it the same styling as the official Icon one?

pale lotus Feb 5, 2024, 9:41 AM

#

first its good to have width="1em" height="1em" in SVG

#

Astro-icon package, mentioned before, might be good idea to have.

#

Personally I prefer UnoCSS + Preset-icons

royal rose Feb 5, 2024, 9:42 AM

#

for some reason it s eemed like astro-icon was not playing well with Starlight

#

it was overriding the styling even with !important

pale lotus Feb 5, 2024, 9:43 AM

#

I haven't touch Starlight yet

royal rose Feb 5, 2024, 9:43 AM

#

with this custom component approach, how would i apply additional css inside the icon?

pale lotus Feb 5, 2024, 9:45 AM

#

as you can see in examples before, you can pass props inside component.

royal rose Feb 5, 2024, 9:45 AM

#

i still dont fully understand what a prop is

pale lotus Feb 5, 2024, 9:45 AM

#

but CSS if for styling

#

prop can be width="1em" height="1em"

#

you can pass that inside your component

#

https://docs.astro.build/en/basics/astro-components/#component-props

Docs

Components

An intro to the .astro component syntax.

royal rose Feb 5, 2024, 9:52 AM

#

---
const props = Astro.props;
---

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 64 64" {...props}>
    <g display="inline" vertical-align="middle">

#

i dont want to do the css inside the markdown file cause that'll just make it unreadable

pale lotus Feb 5, 2024, 9:54 AM

#

thats why you have templates/layouts

royal rose Feb 5, 2024, 9:59 AM

#

maybe in the future but shouldnt this work?

---
const props = Astro.props;
---
<style>
    svg {
        color: #fff;
    }
</style>

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"viewBox="0 0 64 64" {...props}> ...

pale lotus Feb 5, 2024, 10:00 AM

#

show me your entire SVG code

#

if colors of strokes / shapes are defined in SVG, then it might be hard to overwrite that

#

and you need to pass that color white #ffffff as props

royal rose Feb 5, 2024, 10:11 AM

#

oh i just used color as a way to see instant results

#

i wont actually be using color like that

#

there's no color in the svg

pale lotus Feb 5, 2024, 10:12 AM

#

ok then, so fill svg with color, passing it as props

#

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

MDN Web Docs

Fills and Strokes - SVG: Scalable Vector Graphics | MDN

There are several ways to color shapes (including specifying attributes on the object) using inline CSS, an embedded CSS section, or an external CSS file. Most SVG you'll find around the web use inline CSS, but there are advantages and disadvantages associated with each type.

royal rose Feb 5, 2024, 10:13 AM

#

1 sec let me demonstrate my issue

pale lotus Feb 5, 2024, 10:13 AM

#

<Icon fill="#ffffff"> might work, but Im not sure

royal rose Feb 5, 2024, 10:52 AM

#

i figured it out

desert echo Feb 5, 2024, 11:18 AM

#

in the case that your not using astro-icon, can you tell your issues here https://github.com/natemoo-re/astro-icon/issues

royal rose Feb 5, 2024, 11:23 AM

#

im not sure if it was just user error though

#How do you make custom icons?