gulp workflow for building SVG sprites; bonus: placing symbols in a Django template with a custom tag

_icons.scss

.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;
}

gulpfile.js

// 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)

package.json

{
  "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"
  }
}

project.js

// 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()

project_tags.py

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)