SVG sprite #204

Activity

1. colebemis commented on Oct 13, 2017

   

   colebemis

   on Oct 13, 2017

   Member

   More actions

   I've been pretty swamped with school and work. Do you want to open a PR?

   We currently have a node script called bin/build-svgs.js that processes all the SVGs from the icons direction and puts them in the dist/icons directory. To create an SVG sprite, all we should have to do is write a similar bin/build-sprite.js script that processes all the SVGs from the icons directory and combines them into a dist/feather-sprite.svg. You'd also have to do some research on current best practices for SVG sprites (because they change so frequently).
2. colebemis

   added

   enhancement

   good first issue

   help wanted

   on Oct 13, 2017
3. wuweiweiwu commented on Jan 16, 2018

   

   wuweiweiwu

   on Jan 16, 2018

   More actions

   @colebemis is this still under works? I'd take it :)
4. colebemis commented on Jan 16, 2018

   

   colebemis

   on Jan 16, 2018

   Member

   More actions

   @wuweiweiwu I don't think anyone is working on this right now. Feel free to take it on 👍
5. ivanquirino commented on Feb 17, 2018

   

   ivanquirino

   on Feb 17, 2018

   Contributor

   More actions

   I may start working on this soon, I'm really needing it in sprite form, because I can't stand react-feather's one component per icon approach. I've already made an Icon helper component for using with Open Iconic's sprite so I think I'll follow Open Iconic's approach for the sprite.
6. ivanquirino commented on Feb 17, 2018

   

   ivanquirino

   on Feb 17, 2018

   Last edited by ivanquirino

   Contributor

   More actions

   I made a script that builds the sprite using dist/icons.json, so it must be run after the current main build. The SVG attributes of the inner linked file in the <use /> tag don't work, so the SVG attributes, class or style must be passed when using the inline SVG tag. Just like this:

   <svg [feather svg attributes, css class atrtibute, style attribute]>
     <use xlink:href="[spriteFileUrl]#[iconID]"/>
   </svg>

   The following CSS class was extracted from the default icon attributes and renders it nicely:

   .feather {
     width: 24px; 
     height: 24px; 
     stroke: currentColor; 
     stroke-width: 2; 
     stroke-linecap: round; 
     stroke-linejoin: round; 
     fill: none
   }

   As today is Saturday and I've had enough already, I'll write the tests on Monday and make a PR as soon as possible. The script and SVG file follows:
   build-sprite.zip
7. ivanquirino commented on Feb 19, 2018

   

   ivanquirino

   on Feb 19, 2018

   Contributor

   More actions

   That's it: #319

   👍React with 👍1Reacted by Cole Bemis
8. colebemis commented on May 21, 2018

   

   colebemis

   on May 21, 2018

   Member

   More actions

   Closed in #319
9. colebemis

   closed this as completedon May 21, 2018