search

sugarlabs / www

The Sugar Labs web site
https://www.sugarlabs.org
GNU General Public License v3.0
60 stars 178 forks source link

Update our documentation on how to update icons (ion icons) #436

Open pikurasa opened 1 month ago

pikurasa commented 1 month ago

We need to update our icons.

I don't know how to do this. This is what I know:

I think there are a batch of files to update. See: https://github.com/sugarlabs/www/commit/932dbab16cb5194ca033edd46448445f908c5526

I /think/ the related code is here: https://github.com/ionic-team/ionicons ; and their homepage is here: https://ionic.io/ionicons

This would help us solve https://github.com/sugarlabs/www/pull/431, as well as just be more up to date in general.

soumyaranjan-panda commented 1 month ago

The issue arises from the absence of a Mastodon logo within the Ion-Icons framework we're currently utilizing.

image I utilized SVG here. What are your thoughts on it? @pikurasa

pikurasa commented 1 month ago

I can see that that works, but isn't there a way to update similarly to what was done with https://github.com/sugarlabs/www/commit/932dbab16cb5194ca033edd46448445f908c5526 with the most current version of that library?

soumyaranjan-panda commented 1 month ago

I spent hours searching for the Manstadon icon using ion-icons framework, but I couldn't find it, so I ended up using an SVG

pikurasa commented 1 month ago

Perhaps we can use it as a temporary solution.

There is probably some method for "importing" https://github.com/ionic-team/ionicons to our repo.

@nikkuAg are you able to help out with this?

nikkuAg commented 1 month ago

Hi, https://ionic.io/ionicons You can search for the icon from this page and then just add the icon name in the code

soumyaranjan-panda commented 1 month ago

Hi, https://ionic.io/ionicons You can search for the icon from this page and then just add the icon name in the code

I wish it was that simple, the icons in the codebase are stored locally(which does not include manstodon's icon and has no relation with the site you have given here), so we need to bring them in locally. I did that in #437.

nikkuAg commented 1 month ago

I wish it was that simple, the icons in the codebase are stored locally(which does not include manstodon's icon and has no relation with the site you have given here), so we need to bring them in locally. I did that in #437.

For this you can update the ion package being used and then it will be available in the local folder and then use it

pikurasa commented 1 month ago

I wish it was that simple, the icons in the codebase are stored locally(which does not include manstodon's icon and has no relation with the site you have given here), so we need to bring them in locally. I did that in #437.

For this you can update the ion package being used and then it will be available in the local folder and then use it

Can someone here document the steps to update the package, or put a link in our README for where those instructions are? That would really help us in the future.

soumyaranjan-panda commented 1 month ago

How to change/add ion-icons?

1. Install FontForge:

2. Create or Prepare Your Icon:

  • Create your icon in a vector graphics editor and save it as an SVG file.
  • Ensure that your icon is properly scaled and fits well within the boundaries of a single glyph.

3. Open Your .ttf File in FontForge:

  • Launch FontForge and open the .ttf file you want to edit by going to File > Open and selecting the .ttf file.

4. Add a New Glyph Slot:

  • In the FontForge interface, you will see a grid representing different glyphs in the font. Find an empty slot or select an existing glyph that you want to replace.

5. Import Your Icon:

  • Double-click on the empty slot or the slot you want to replace to open the glyph editor.
  • Go to File > Import and select the SVG file of your icon.
  • Adjust the size and position of your icon to ensure it fits well within the glyph boundaries.

6. Set the Glyph Properties:

  • After importing the icon, you might need to adjust its properties, such as the glyph's width, bearing, and kerning.
  • You can do this by using the tools available in the glyph editor.

7. Save Your Changes:

  • Once you're satisfied with the new icon, go to File > Generate Fonts to save the .ttf file.
  • Choose the appropriate options and generate the font file. This will save your .ttf file with the new icon included.

8. Test Your Updated Font:

  • Install the updated .ttf file on your system and test it in an application that uses fonts to ensure that your new icon appears correctly.

Here is a step by step process of updating the package(ion -icons), this is how i updated. I'm unsure if there's a more efficient approach. This method successfully updated the package.

pikurasa commented 1 month ago

Here is a step by step process of updating the package(ion -icons), this is how i updated. I'm unsure if there's a more efficient approach. This method successfully updated the package.

That's super-helpful.

I'll review this by the end of the day today. Thank you!

pikurasa commented 1 month ago

Our icons were updated (https://github.com/sugarlabs/www/pull/437), but we should also update our documentation as well.