Custom Twig.js builder for kss-node designed for Colette.
KSS is great but some options are missing.
To document SVG symbols
// SVG symbols
//
// A collection of svg symbols built with [svgstore](https://www.npmjs.com/package/svgstore).
//
// Symbols: **/*.svg in ../../svg/
//
// Style guide: Symbols
A new option is added to KSS to include SVG symbols bundle in KSS template.
module.exports = {
svgSprite: `<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><symbol viewBox="0 0 32 32" id="symbol-social-youtube" xmlns="https://www.w3.org/2000/svg"><path d="M31.3 8.3c-.4-1.4-1.4-2.4-2.8-2.8-2.4-.7-12.5-.7-12.5-.7s-10 0-12.5.7C2.1 5.9 1.1 6.9.7 8.3.2 10.8 0 13.4 0 16c0 2.6.2 5.2.7 7.7.4 1.4 1.4 2.4 2.8 2.8 2.5.7 12.5.7 12.5.7s10 0 12.5-.7c1.4-.4 2.4-1.4 2.8-2.8.5-2.5.7-5.1.7-7.7 0-2.6-.2-5.2-.7-7.7zM12.8 20.8v-9.6l8.4 4.8-8.4 4.8z"/></symbol></svg>`,
svgPrefix: 'symbol',
}
It’s recommanded to use a tool to build your svg sprite.
- Run
npm pack
to generate a compressed.tgz
file of the project (e.gcolette-kss-builder-5.4.0.tgz
) on the root of the project - On Colette's side, point to that file on the
package.json
and runnpm install
- /!\ Be careful to not commit this file and/or the colette-kss-file path