Skip to content

Instantly share code, notes, and snippets.

@krzysztofjeziorny
Last active October 23, 2022 17:27
Show Gist options
  • Save krzysztofjeziorny/d5fd454fe33d5067a7fbe5d5704d8d20 to your computer and use it in GitHub Desktop.
Save krzysztofjeziorny/d5fd454fe33d5067a7fbe5d5704d8d20 to your computer and use it in GitHub Desktop.
gulp workflow for building SVG sprites; bonus: placing symbols in a Django template with a custom tag
.icon {
display: inline-block;
vertical-align: middle;
width: 1rem;
height: 1rem;
stroke: currentcolor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
margin-top: -0.25rem;
}
// https://github.com/thecodercoder/frontend-boilerplate/blob/master/gulpfile.js
// Importing specific gulp API functions lets us write them below as series() instead of gulp.series()
const { src, dest, watch, series, parallel } = require('gulp')
// Importing all the Gulp-related packages we want to use
const debug = require('gulp-debug')
const svgsprite = require('gulp-svg-sprite'),
plumber = require('gulp-plumber'),
config = {
shape: {
dimension: {
maxWidth: 32,
maxHeight: 32,
},
// cleaning up the icons from fill and strokes attributes
transform: [{
svgo: {
plugins: [{
name: 'removeAttrs',
params: { attrs: '(fill|stroke|stroke.*)' },
}]
}
}]
},
mode: {
symbol: {
dest: '.',
sprite: 'icons-sprite.svg',
inline: true,
},
},
}
// File paths
const rootPath = './static/' // adjust all paths to your needs
const iconFiles = [
'chevron-left.svg',
'chevron-right.svg',
'some-other-file.svg',
]
const files = {
iconsPath: './node_modules/lucide-static/icons/', // source SVGs; here: Lucide Static
iconsFiles: iconFiles, // List of wanted icons
iconsDestPath: rootPath + 'assets/img/icons', // Copy icons into
spriteIconsPath: rootPath + 'assets/img/icons/*.svg', // Take all SVGs from here
spriteDestPath: rootPath + 'dist/img', // Copy SVG sprite into
}
// Collect SVG icons (Lucide Static in our case) files from the list "iconFiles"
function collectIcons() {
return src(files.iconsFiles, { cwd: files.iconsPath })
.pipe(plumber())
.pipe(debug())
.pipe(dest(files.iconsDestPath))
}
// Create a sprite file
function svgSprite() {
return src(files.spriteIconsPath)
.pipe(plumber())
.pipe(debug())
.pipe(svgsprite(config))
.on('error', function (error) {
console.log(error)
})
.pipe(dest(files.spriteDestPath))
}
exports.sprite = series(collectIcons, svgSprite)
{
"name": "my-svg-sprite",
"version": "0.0.1",
"description": "Building an SVG sprite from a bunch of single files",
"main": "gulpfile.js",
"author": "Krzysztof Jeziorny 2022",
"license": "AGPL-3.0-or-later",
"private": true,
"devDependencies": {
"gulp": "^4.0.2",
"gulp-debug": "^4.0.0",
"gulp-plumber": "^1.2.1",
"gulp-svg-sprite": "^2.0.0"
},
"dependencies": {
"lucide-static": "^0.93.0"
}
}
// put svg sprite in DOM
var xhr = new XMLHttpRequest()
xhr.open('get', '/static/img/icons-sprite.svg', true)
xhr.onreadystatechange = function () {
if (xhr.readyState != 4) return
var svg = xhr.responseXML.documentElement
svg = document.importNode(svg, true)
document.body.appendChild(svg)
}
xhr.send()
from django.template import Library
from django.utils.html import format_html
from django.utils.safestring import mark_safe
register = Library()
@register.simple_tag(name="svg_icon")
def svg_icon(icon_name, extra_class=""):
"""
Django custom tag for placing a symbol from the sprite in template
Source: https://mirellavanteulingen.nl/blog/svg-icons-django-template.html
Use as: {% svg_icon "symbol-id" %}
"""
svg_tag = format_html(
'<svg aria-hidden="true" aria-label="{name}" class="icon {extra}" '
'role="img" fill="currentColor">'
'<use xlink:href="#{name}"></use>'
"</svg>",
name=icon_name,
extra=extra_class,
)
return mark_safe(svg_tag)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment