search

locomotivemtl / locomotive-boilerplate

🚂 Front-end boilerplate for projects by Locomotive.
https://locomotivemtl-boilerplate.vercel.app/
MIT License
455 stars 71 forks source link

Fix svg-mixer support for sub-directories #175

Closed mcaskill closed 3 months ago

mcaskill commented 3 months ago

By default, svg-mixer only uses the SVG's file name as its ID. If any SVG files are stored in sub-directories, that information is ignored in the assembled spritesheet. This is problematic since context is lost (the sub-directory's name) and risks duplicate symbol IDs.

This PR introduces a new NPM dependency, common-path to resolve the longest common base path to be used as a prefix, and uses a dependency of svg-mixer named url-slug to sanitize the prefix.

Example for SVG source path ./assets/images/sprite:

Path ID
./assets/images/sprite/foo.svg foo
./assets/images/sprite/baz/qux.svg baz-qux
vercel[bot] commented 3 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
locomotive-boilerplate ✅ Ready (Inspect) Visit Preview Apr 2, 2024 10:17pm
devenini commented 3 months ago

LGTM