Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SVG spritesheet cleanup #3924

Closed
2 tasks done
bhousel opened this issue Mar 23, 2017 · 2 comments
Closed
2 tasks done

SVG spritesheet cleanup #3924

bhousel opened this issue Mar 23, 2017 · 2 comments
Labels
chore Improvements to the iD development experience or codebase

Comments

@bhousel
Copy link
Member

bhousel commented Mar 23, 2017

Most of our SVG graphics have been switched over to symbols, which are more flexible because you can <use> them anywhere in the code, and you don't have to keep track of their exact positions in the spritesheet, and you can change their styling on the fly, etc.

A few SVG graphics still use the old-style background image trick, and it's mostly the graphics in the walkthrough and some of the modal and social buttons.

Tracking here that I should:

  • switch the remaining graphics to symbols and change the parts of the code to <use> them
  • which lets us split all the svg source images into separate files and do away with the brittle spritesheet and idraw file
@bhousel bhousel added chore Improvements to the iD development experience or codebase walkthrough-help An issue with the walkthrough or help pane labels Mar 23, 2017
@bhousel bhousel added the wip Work in progress label Mar 26, 2017
@bhousel bhousel removed the walkthrough-help An issue with the walkthrough or help pane label Apr 13, 2017
@bhousel
Copy link
Member Author

bhousel commented Jun 5, 2018

This was done for the poi- icons.. They're here now: https://github.com/bhousel/temaki

bhousel added a commit that referenced this issue Jun 5, 2018
bhousel added a commit that referenced this issue Jun 6, 2018
@bhousel bhousel closed this as completed in 749357e Jun 9, 2018
@bhousel
Copy link
Member Author

bhousel commented Jun 9, 2018

This is now done! All the graphics in iD are assembled from individual SVG files into the main spritesheet at build time. No more iD-sprite.src.svg or idraw project file. Also the spritesheets are namespaced now, since we have several to juggle.

This means that the new procedure for adding a symbol or graphic to iD is:

  • create your graphic and drop it into one of the folders under svg/iD-sprite/*
  • npm run dist to rebuild

I've also added a README with some more info.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
chore Improvements to the iD development experience or codebase
Projects
None yet
Development

No branches or pull requests

1 participant