Change an Icon on a template astro

[thick osprey]

I want to modify an Icon of my page and i want to know how it work.I install the package and im trying to use this doc https://www.npmjs.com/package/astro-icon but i dont know where is the astro.config.mjs file and where are the library of the icon i mean like flaticon.I put the ion.astro file and the example that was use on the template.

[past yarrow]

the astro.config.mjs is available in root of your project, quick look around the logs suggest that you have not installed simple-line-icons dependency

installing it via npm install @iconify-json/simple-line-icons or by following Astro Icon instructions should get you going 😉

[thick osprey]

so the doc that i post is not usefull ?

@past yarrow

[past yarrow]

if you meant the message.txt that was helpful to know the error, other than that I gotta ask for some clarification

[thick osprey]

@past yarrow srry i forget ur message when i import the icon its underliner in red

https://www.astroicon.dev/guides/customization/

im following this doc and using this icon https://icon-sets.iconify.design/simple-line-icons/graduation/

i also install the dependency mentioned

[past yarrow]

is the error related to {Icon} being undefined ? does running npx astro add astro-icon resolves this error ?

[thick osprey]

but no error is mentioned

no its still red

do i have to also import the icon on my page ?

im working on the index

[past yarrow]

you dont need to import the icon

[thick osprey]

so what the problem do you thing ?

when i paste this line its still red

@past yarrow

[past yarrow]

I kinda expect some console log error in your case, I tried Simple line set in this stackblitz instance and it worked without any issues 😕

[fluid pike]

After you add an icon set, you have to restart the dev server.

[thick osprey]

i did it

[thick osprey]

how can i found the console error should i install astro extension ?

its those logo on the template Jeanine White portfolio

[fluid pike]

You also have to install it and add it to the config
https://www.astroicon.dev/guides/customization/#find-an-icon-set

[thick osprey]

is it on the astro config file ?

[fluid pike]

mdi is just an example, you want @iconify-json/simple-line-icons

[thick osprey]

this is what he look like

[past yarrow]

looks good 👍

[thick osprey]

each file ?

because if its on the spot i want to add it i did

[fluid pike]

integrations: [
    icon({
      include: {
        // Include only three `simple-line-icons` icons in the bundle
        "simple-line-icons": ['graduation', 'account-plus', 'account-minus'],
        // Include all `simple-line-icons` icons
        "simple-line-icons": ['*']
      }
    })
  ]

use one of the above options to decide which icons to include

[thick osprey]

not sure i understand how the integration work

do i must use this syntax integrations: [
icon({
include: { .... ?

[past yarrow]

Can you share the repo where this issue is occuring ?

[thick osprey]

https://github.com/Rayane-94/rayane-94.github.io

is he public ?

[past yarrow]

yes it is, thanks

[fluid pike]

<Pill><Icon name="simple-line-icons:graduation" size="1.33em" /> Graduation</Pill>

but you have to import Icon from import { Icon } from 'astro-icon/components'

[past yarrow]

indeed, the OP's Icon is interferring with Astro-Icon 🤦‍♂️

[thick osprey]

what the OP's can u explain my mistake ?

[fluid pike]

The OP is you. Original Poster.

[past yarrow]

1 thing you can do to work with your Icon.astro is manually define the graduation icon inside IconPaths.ts

that means you dont have to install Simple Line Icons set and that would reduce it to

<Pill><Icon name="graduation" size="1.33em" /> Graduation</Pill>

[fluid pike]

In your code for index.astro, you have:

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

to use astro-icon, you have to have:

import { Icon } from 'astro-icon/components'

you can't have both, because they are both importing a component called Icon
So, use one or the other, or rename your component.

[thick osprey]

@fluid pike @past yarrow

size are now red

[past yarrow]

size in astro-icon take numbers instead - change it to

<Pill><Icon icon="code" size={40} /> Développeur</Pill>

[thick osprey]

the error is still there

icon is now red 😂

[past yarrow]

you will have to find the equivalent icons in https://icones.js.org/collection/simple-line-icons and change icon to name

[thick osprey]

@past yarrow can i go outside of the simple-line-icons ?

i want 1 icon for sport, graduation ,school and dev

ok

[past yarrow]

just to be clear you will have to install the set if it happens to be other than simple-line icons, afterwards you can optimise the build with https://www.astroicon.dev/reference/configuration/#include

[thick osprey]

do i have to precise the ph: ?

the integration of icon is complicate on astro btw 😅

still dont work

[past yarrow]

did you installed phosphor icon set (or what the student icon belongs to)?

[thick osprey]

https://icones.js.org/collection/all?s=graduation&icon=ph:graduation-cap

https://icones.js.org/collection/all?s=code&icon=ic:baseline-code

https://icones.js.org/collection/all?s=sport&icon=material-symbols:sports-and-outdoors

https://icones.js.org/collection/all?s=student&icon=ph:student

here are there

and i didnt install phospor @past yarrow

[past yarrow]

given this variety, I suggest downloading this Icons as it is (not to be confused with the set), and going with local icons

I gotta log off 🙏 if this still does not resolves I will PR it up on your repo next day

[thick osprey]

np i will try to make that and commit for u can show the git tomorrow

@fluid pike do u know with this method where sould i have to put the download file in local ?

[fluid pike]

I can help you with problems, but I don't have time to program it all for you.
You should be able to follow the instructions here:
https://www.astroicon.dev/getting-started/
it's not that complicated.

I would recommend trying to find icons from the same set for consistency in appearance.
For astro-icon search this site for icons: https://iconify.design/

[thick osprey]

Im trying few time again and again in different time but its not work. I create my folders icons with my file witch have each icon

but folder icon.astro have a problem

I made all the step on the doc

and i push my code with the problem on git

https://github.com/Rayane-94/rayane-94.github.io

[nova acorn]

Have you tried deleting your node_modules folder and rerunning your install command?

[fluid pike]

It's not icon, it's Icon

[past yarrow]

made a PR for the troubleshooting, hopes up it will make you comfortable with astro-icon

[thick osprey]

whats a PR ?

[past yarrow]

its a pull request that you can check in your github repository

[thick osprey]

idk how its works and how it can help me can u explain ?

[thick osprey]

i change the name of my folder to Icon 👍🏽 still same error

[fluid pike]

https://www.youtube.com/watch?v=For9VtrQx58

[thick osprey]

its good to know that but i dont think i need a pull request and im not able to try to make that on this project with some little changes of a astro template but i think i will have to use it on the futur on a team work

Righ now i just have to change those icon and change a some text on the website and thats it

[fluid pike]

Look at the PR on your Github repo. @past yarrow has spent time fixing your code and putting it in the PR so you can see how to do things correctly.

[past yarrow]

its totally fine if you reject it, the motive is to clarify how astro-icon can be utilized in your repo

[thick osprey]

oh ok of course i will accept ty for ur help i will see what was my mistakes

[thick osprey]

Ty it works now i have to center the text on the block cause i have some gap

[past yarrow]

kinda unexpected since I added the align-items: center to the pill and cta components

[thick osprey]

So what im supose to do 🤣🤣🤣😅😅 i will try some thing but not sure it will work

[thick osprey]

no sorry i syhncronise my git since the pull request and its work but when i see the <style> i didnt see any big difference between my last local version may be i didnt see well.

[thick osprey]

@past yarrow When i would rerun my workflow with your pull request with github.io i have this error

It wasnt before this changes so i dont know what too do for solve it can u help me ?

[past yarrow]

ahh I added a pnpm-lock.yaml during that PR (my bad). if you remove it from your repo that will resolve the issue

[thick osprey]

no problem in each file is he ? do u know

[past yarrow]

https://github.com/Rayane-94/rayane-94.github.io/blob/master/pnpm-lock.yaml this one

[thick osprey]

i remove all the file ?

[past yarrow]

yeah only the lock file i just shared

[thick osprey]

ok

what this file he is supose to do ?

[past yarrow]

delete the file from your local project, commit the change and push it

[thick osprey]

yes i did i was asking what the code do

still an error

[past yarrow]

First look at https://github.com/Rayane-94/rayane-94.github.io/actions/runs/8942338825/job/24564799875 tells you should update Line 4 in Icon.astro to import { Icon } from 'astro-icon/components'

[thick osprey]

ok i did i will restart but the {Icon} is underline in red

import type { HTMLAttributes } from 'astro/types';
import { iconPaths } from './IconPaths';
import { Icon } from 'astro-icon/components'

interface Props {
    icon: keyof typeof iconPaths;
    color?: string;
    gradient?: boolean;
    size?: string;
}

const { color = 'currentcolor', gradient, icon, size } = Astro.props;
const iconPath = iconPaths[icon];

const attrs: HTMLAttributes<'svg'> = {};
if (size) attrs.style = { '--size': size };

const gradientId = 'icon-gradient-' + Math.round(Math.random() * 10e12).toString(36);
---

<svg
    xmlns="http://www.w3.org/2000/svg"
    width="40"
    height="40"
    viewBox="0 0 256 256"
    aria-hidden="true"
    stroke={gradient ? `url(#${gradientId})` : color}
    fill={gradient ? `url(#${gradientId})` : color}
    {...attrs}
>
    <g set:html={iconPath} />
    {
        gradient && (
            <linearGradient
                id={gradientId}
                x1="23"
                x2="235"
                y1="43"
                y2="202"
                gradientUnits="userSpaceOnUse"
            >
                <stop stop-color="var(--gradient-stop-1)" />
                <stop offset=".5" stop-color="var(--gradient-stop-2)" />
                <stop offset="1" stop-color="var(--gradient-stop-3)" />
            </linearGradient>
        )
    }
</svg>

<style>
    svg {
        vertical-align: middle;
        width: var(--size, 1em);
        height: var(--size, 1em);
    }
</style>

here is my file Icon.astro

[past yarrow]

ohh right, your own Icon.astro is conflicting with astro-icon how about just renaming it to something different like CustomIcon.astro and importing it like that

[thick osprey]

https://github.com/Rayane-94/rayane-94.github.io/actions/runs/8942488388/job/24565391581

on vscode they said Icon is declared but his value is never read

i think my importation of icon is not used

[thick osprey]

I didnt find the solution

[past yarrow]

considering renaming Icon to CustomIcon in the listed files

[thick osprey]

still same error

Im feeling stupid i can resolve a simple issue

[past yarrow]

Change Line 8 in slug.astro to import Icon from '../../components/CustomIcon.astro';

[thick osprey]

Thank you its work i should read all the error

[past yarrow]

that was nice of you to pushing all the changes to GitHub 💪 , keeping it in local device makes it a nightmare resolving issues of such kinds