SVG Sprite map

[jnvsor]

It would be nice to bundle feather in a single spritemap to reduce number of requests (At least until HTTP/2) You could throw svgo at the spritemap for good measure

[colebemis]

That's a good idea. I'll look into how I can integrate something like that into the build process.

[roybarber]

@colebemis I can help integrate a gulp task to generate a spritemap / css and also to optimise the
outputted SVG

[colebemis]

@roybarber Thanks! I'll reach out to you when I'm ready to start working on that 👍

[Swizz]

Can help too. I am still experimenting to find a way to use your icons with the ease of an icon font without the drawbacks.

And svg/use will be the perfect way to do.

[Swizz]

svgstore/svgstore seem the best candidate.

Ill work on my own on a proof of concept.

[colebemis]

@Swizz Thanks! I've also been doing some research on SVG sprites. Pretty cool stuff 👍

[roybarber]

Would need a gulp/grunt task to automate all the different scenarios and generate CSS

[colebemis]

Yeah, I'm thinking Gulp, I find it much easier to read than Grunt.

[Swizz]

Svgstore is grunt, gulp, cli, I wont choose any task runner for @colebemis. Ill let him choose and work around.

edit : Let's Gulp. Would you like a PR with the reworking of your current workflow into Gulp task ?

[colebemis]

Here are some related articles I've found:

• https://cloudfour.com/thinks/our-svg-icon-process/
• https://egghead.io/courses/create-an-svg-icon-system
• https://nucleoapp.com/how-to-create-an-icon-system-using-svg-symbols/
• https://css-tricks.com/svg-sprites-use-better-icon-fonts/
• http://varun.ca/icon-component/

[colebemis]

@Swizz Yeah, I'd love to see what you've come up with. I can't guarantee that I'll merge it into the project right away. I want to spend some time with this and put a lot of thought into it. This article looks pretty promising: https://cloudfour.com/thinks/our-svg-icon-process/

[Swizz]

We've done the same readings. Alright, I'll work on it. First by rewriting your current workflow into gulp, and lately the svg sprite construction.

[colebemis]

How could my current workflow use Gulp? Are you talking about turning the npm scripts into Gulp tasks?

[roybarber]

Things like

• Optimisation
• PNG generation
• Sprite generation
• CSS sprite-map generation
• Icon font generation
• Sketch/Illustrator/Photoshop export

etc can be made into a single workflow with seperate commands.

I even use a sketch command on my starting point to export all assets. So depends what you are designing the icons in too. That could be automated!

[colebemis]

@Swizz Also, is there a reason you're thinking svgStore over gulp-svg-sprite? gulp-svg-sprite seems like it's being actively maintained and svgStore hasn't been updated in a while.

[colebemis]

@roybarber I'm designing in Illustrator. I tried Sketch but Illustrator handles icons way better. I'm all for automation! I'd love to just export from Illustrator and have the build take care of the rest.

[Swizz]

Svgstore were close of that I had in mind. (Task runner independent) as you choose Gulp, we can work with.

I'd like to add to @roybarber list, symlink as icon alias into our workflow.

[colebemis]

I'm also interested in how to best deliver and use the SVG sprite with npm as that will probably be how most people will use it. Also, can SVG sprites be used with CDN? I'd love to give people access to Feather in web apps like CodePen or JSBin.

[Swizz]

Unpkg works with NPM registry for content delivery, it could be a great candidate for communicate how to use Feather by CDN.

[colebemis]

I'm wondering if use will work with a CDN.

For example, will something like this <use xlink:href="https://unpkg.com/../sprite.svg#mail"/> work?

[Swizz]

I know use is aware and yelling about cross domain requests, so I won't tell anything without proper testing.

[colebemis]

👍 Just something to think about

[Swizz]

Confirmed, Svg sprite cant be used cross domain.

• https://css-tricks.com/svg-use-external-source/
• https://codepen.io/denilsonsa/pen/vdeLu

Entypo takes the choice to insert the SVG in the body. This isnt a good practice, but we can make a specific CDN file with a huge warning.

[colebemis]

Why not implement something like Entypo?

[Swizz]

Im not in love about the concept to inject SVG into the body at runtime. I dont know how this can fit with SPA.

Also, SVG sprite with symbole can be used locally with bundler or not, and providing a SVG sprite can be made Feather useable out of the box for Android native dev and more ! 🎉

But you'r still the boss.

[colebemis]

Haha just trying to consider all the options. There are a lot of pros and cons to consider for every approach.

[Swizz]

We can provide fonts, sprite and loader to fit all needs/wants 👍

[colebemis]

What do you mean by "loader"?

[Swizz]

The "thing like Entypo". I dont figure how to name it yet.

[colebemis]

Sounds good 👍 I feel like we should try to tackle each of these one by one. Seems like starting with SVG sprite makes the most sense.

[colebemis]

This looks like a good resource as well: https://abookapart.com/products/practical-svg

[colebemis]

A LOT of good stuff in here too: https://css-tricks.com/mega-list-svg-information/

[mshwery]

Hm... Maybe have to provide a React wrapper or port these to react-icon

[colebemis]

@mshwery We're discussing that over on #41.

[Swizz]

So much reading.

But I can tell you, that SVG Font is not an option anymore.

Also take a look at http://evil-icons.io/

[colebemis]

Let's move this conversation to #101 👍