Font Awesome 5 Free SVG collection

[morosanuae morosanuae]

Hello TiddlyWiki lovers!

I want to invite you all to my online Font Awesome 5 Free SVG collection, published on TiddlySpot: http://fa5-free-svg.tiddlyspot.com

Just drag'n'drop an image into your wiki. Simple as that. No complicated CSS stuff to configure. Use them just like default TiddlyWiki images.

Current FA5 version 5.9.0 (latest)

If you find some problems or have a question please let me know! Thanks!

EDIT: Now the site has batch export functionality. Just drag'n'drop the images into a specialized area in the sidebar ("Batch Export" tab) and then export them in a single JSON file that can be easily imported into your wiki.

morosanuae.

[@TiddlyTweeter]

Ciao morosanuae

morosanuae wrote:

I want to invite you all to my online Font Awesome 5 Free SVG collection, published on TiddlySpot: http://fa5-free-svg.tiddlyspot.com

  Excellent! And real numbers  of them!

I see you have converted them to TW default sizing of 22pt x 22pt.  Its a good, simple to use, resource

  I have two comments ... 

  1 - I think it would be good to cite the source? I know the maker of FA doesn't mind if you don't mention a license, but might be a good idea?

  2 - Some FA svg are not square. For TW icons I think its better they are but to do that you'd, I think, need a forced override to rescale within the viewbox? A thought!

Best wishes

Josiah

[Mohammad]

Great work!

Thank you for sharing!

Added to TW-Scripts

On Saturday, July 6, 2019 at 2:49:32 PM UTC+4:30, morosanuae morosanuae wrote:

Hello TiddlyWiki lovers!

I want to invite you all to my online Font Awesome 5 Free SVG collection, published on TiddlySpot: http://fa5-free-svg.tiddlyspot.com

Just drag'n'drop an image into your wiki. Simple as that. No complicated CSS stuff to configure. Use them just like default TiddlyWiki images.

Current FA5 version 5.9.0 (latest)

If you find some problems or have a question please let me know! Thanks!

morosanuae.

[morosanuae morosanuae]

Ciao Josiah (@TiddlyTweeter)

All the SVGs respect the TW standards. I've used the default TW images configuration as a template. The SVGs also contain the CSS classes in the TW style.

1 - I will, soon, don't worry. Didn't had enough time. I still have work to do on the page.

2 - I didn't want to mess with the original content (including parameters like viewbox). Isn't this customization a job for the user? Or maybe you can share a concrete example to show me when this can become a problem.

Thanks for the feedback!

morosanuae

[passingby]

Hey, thanks! 

can we change the color?

On Saturday, July 6, 2019 at 3:19:32 AM UTC-7, morosanuae morosanuae wrote:

Hello TiddlyWiki lovers!

I want to invite you all to my online Font Awesome 5 Free SVG collection, published on TiddlySpot: http://fa5-free-svg.tiddlyspot.com

Just drag'n'drop an image into your wiki. Simple as that. No complicated CSS stuff to configure. Use them just like default TiddlyWiki images.

Current FA5 version 5.9.0 (latest)

If you find some problems or have a question please let me know! Thanks!

morosanuae.

[morosanuae morosanuae]

Yes, with the help of CSS. First you need to create a CSS class and then apply it to the element that contains the SVG image. You can give any name to your CSS class. See an example below:

CSS:

.mc-svg-red svg {
fill: red;
}

Code:

<span class="mc-svg-red">
{{$:/core/images/fa5/brands/500px}}
</span>

P.S. If you don't know how to use CSS with TiddlyWiki see official docs: https://tiddlywiki.com/#Using%20Stylesheets

[passingby]

Got it, thanks!

On Saturday, July 6, 2019 at 7:16:14 AM UTC-7, morosanuae morosanuae wrote:

Yes, with the help of CSS. First you need to create a CSS class and then apply it to the element that contains the SVG image. You can give any name to your CSS class. See an example below:

CSS:

.mc-svg-red svg {
fill: red;
}

Code:

<span class="mc-svg-red">
{{$:/_moro/imagini/svg/fa5/brands/500px}}
</span>

[TonyM]

Hi

Thanks for doing this. In your making the svg s comply with tiddlywiki could you share the rules you applied so others can do the same.

The U.N. icons, sustainable development goals and others are available for the same conversion.

Thank again
Tony

[morosanuae morosanuae]

Hi Tony,

The original SVG files are processed and converted automatically into tiddlers (JSON) by a script (.BAT) I've created. I just use the original TiddlyWiki files configuration as a template. It's really nothing special, only that I've automated the task.

morosanuae

[Pit.W.]

morosanuae,

would you consider to publish the .BAT script?

Would be interesting for learning under several aspects...

Pit

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/66098632-1518-4b25-bb5b-7637f1de2c87%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

_________________________________________________________________
________________________________________________________
Ihre E-Mail-Postfächer sicher & zentral an einem Ort. Jetzt wechseln und alte E-Mail-Adresse mitnehmen! https://www.eclipso.de

[morosanuae morosanuae]

Hi Pit,

It's not that I don't want to make it public. The problem is that the script doesn't do absolutely everything because was made in a hurry. I still need to make some batch editing in Notepad++ first to prepare the original SVG images for assembly by the .BAT script. And there's another aspect that keeps me from improving/extending the script. There are some limitations with CMD (8192 character command line limit) that I didn't manage to resolve. So now I'm working on a Node.js version that should take care of the entire process I hope. If I'll succeed maybe I'll make it public, but maybe it isn't what you want. Sorry.

morosanuae

[Mohammad]

Hi morosanuae,

 have you decided on the naming rule?

The $:/core/images while these are not core images makes confusion!

I highly recommend to use a naming rule shows these are not in the core and one need to get them separably!

--Mohammad 

On Saturday, July 6, 2019 at 3:19:32 AM UTC-7, morosanuae morosanuae wrote:

Hello TiddlyWiki lovers!

I want to invite you all to my online Font Awesome 5 Free SVG collection, published on TiddlySpot: http://fa5-free-svg.tiddlyspot.com

Just drag'n'drop an image into your wiki. Simple as that. No complicated CSS stuff to configure. Use them just like default TiddlyWiki images.

Current FA5 version 5.9.0 (latest)

If you find some problems or have a question please let me know! Thanks!

morosanuae.

[morosanuae morosanuae]

Hi Mohammad

I've already updated the images. Go ahead and check them out! Now they using the "$:/images/fa5/" prefix.

morosanuae

[Mohammad]

Thanks a million!

This is a great work and simplify incorporating new svgs seamlessly into Tiddlywiki!

Best

Mohammad

[TonyM]

The nothing special is all I want to know.

Remove headers...

One svg at a time is all I want to do so any tips appreciated.

Tony

[morosanuae morosanuae]

Hi Tony,

Do you want to make a conversion yourself? I can post the "algorithm" for a manual conversion if that's what you looking for.

morosanuae

[morosanuae morosanuae]

Tony and others,

I've posted a mini tutorial for those who want to make a manual conversion themselves. It's good for others too to know what I have done. As I told you before it's nothing special or complex. The more complex process is the automation part.

Tutorial is here: http://fa5-free-svg.tiddlyspot.com/#How%20to%20make%20a%20manual%20conversion%20(tutorial)

Let me know if this helped or not and if I should make improvements. Thanks.

morosanuae

[Mohammad]

Added to TW-Scripts

Many thanks morosanuae!

One important thing is the content type and I see you have carefully highlighted that!

Looking forwards for your future work in this area.

Cheers

Mohammad

[TonyM]

morosanuae

Thanks so much that is exactly what I wanted. I will use this to guide me with flaticons and others I will share back.

All I need to know now it to take others from inkle into tiddlywiki and learn how to resize when needed without editing the svg.

Thanks
Tony

[morosanuae morosanuae]

Tony,

All I need to know now it to take others from inkle into tiddlywiki and learn how to resize when needed without editing the svg

I have many icons imported from flaticon.com. Some of them needs to be cleaned of some unneeded elements first (e.g. <g> elements). I think the "viewBox" parameter and the "path" element(s) are the only vital components that you should keep. The rest aren't usually needed. That's based on my own experience. And you should accomplish the sizing, coloring etc. only through CSS.

morosanuae

[Mohammad]

Hello morosanuae

In TW-Scripts (https://kookma.github.io/TW-Scripts/#Working%20with%20SVG) you find a link to https://jakearchibald.github.io/svgomg/

which let you optimize and remove those extra coding from svg images.

Also there are other tools you can use with node.js to help with this.

Also it worth to have a look at

https://kookma.github.io/TW-Scripts/#Font%20Awesome

Good luck with svg icon stuffs and please share your findings

Best

Mohammad

[morosanuae morosanuae]

Hi to all,

NEW! Now the site has batch export functionality. Just drag'n'drop the images into a specialized area in the sidebar ("Batch Export" tab) and then export them in a single JSON file that can be easily imported into your wiki.

http://fa5-free-svg.tiddlyspot.com

morosanuae

[Mohammad]

Hi Morosanuae,

 Thanks for this great tool!

I visit your site frequently and use the great ready to use image tiddlers!

Not sure if you have made an automatic conversion process, but I may recommend to cover other free icons like

https://material.io/tools/icons/?style=baseline

--Mohammad

[morosanuae morosanuae]

Hi Mohammad,

Yes, I have an (semi)automatic conversion process, othwerwise it would have been an unthinkable thing for me to manually convert ~1500 images.

I've looked at your recommended site and the icons look very nice and are very similar to the FA5 ones so are easy to convert. The problem is, from what I saw, that the images cannot be downloaded as a complete package like FA5 that can be processed automatically.

morosanuae

[Mohammad]

Hi again

The whole icons including svgs can be downloaded from

https://github.com/google/material-design-icons

I thought there may be icons not covered in free FA collection! By the way as you said only an automatic script may help to create another wiki with material icons!

Cheers

Mohammad

[Mohammad]

I checked the export feature to export several (bulk) icons and it works amazingly easy!

Thank you !

Your announcement in TW is very short it was great if one or two lines describe the features of http://fa5-free-svg.tiddlyspot.com/

--Mohammad

[Mat]

morosanuae morosanuae wrote:

NEW! Now the site has batch export functionality. Just drag'n'drop the images into a specialized area in the sidebar ("Batch Export" tab) and then export them in a single JSON file that can be easily imported into your wiki.

Wonderful! Love the DnD!

<:-)