Render Nunjucks icon macro into SVGs files

Author: colinrotherham

packages/nhsuk-frontend/gulpfile.mjs

@@ -17,7 +17,7 @@ import types from './tsconfig.json' with { type: 'json' }
 /**
  * Utility tasks
  */
-gulp.task('assets', assets.copy)
+gulp.task('assets', gulp.series(assets.copy, assets.render))
 gulp.task('fixtures', fixtures.compile)
 gulp.task('scripts', gulp.series(scripts.compile, scripts.version))
 gulp.task('styles', gulp.series(styles.compile, styles.version))

packages/nhsuk-frontend/tasks/assets.mjs

@@ -1,14 +1,34 @@
 import { join } from 'node:path'
 
 import * as config from '@nhsuk/frontend-config'
+import { files, icons } from '@nhsuk/frontend-lib'
 import { assets, task } from '@nhsuk/frontend-tasks'
 
+import { nunjucks } from '#lib'
+
 /**
- * Copy NHS.UK frontend images, icons and other assets
+ * Copy NHS.UK frontend images and other assets
  */
 export const copy = task.name('assets:copy', () =>
   assets.copy('nhsuk/assets/**', {
     srcPath: join(config.paths.pkg, 'src'),
     destPath: join(config.paths.pkg, 'dist/nhsuk/assets')
   })
 )
+
+/**
+ * Render NHS.UK frontend icons
+ */
+export const render = task.name('assets:render', async () => {
+  for (const icon of icons.getNames()) {
+    const svg = nunjucks.renderMacro('nhsukIcon', 'nhsuk/macros/icon.njk', {
+      context: icon
+    })
+
+    // Write icon SVG to destination
+    await files.write(`nhsuk-icon-${icon}.svg`, {
+      destPath: join(config.paths.pkg, 'dist/nhsuk/assets/images'),
+      output: { contents: svg }
+    })
+  }
+})

shared/lib/icons.mjs

@@ -0,0 +1,25 @@
+/**
+ * Get icon names
+ */
+export function getNames() {
+  return [
+    'arrow-down-circle',
+    'arrow-down',
+    'arrow-left-circle',
+    'arrow-left',
+    'arrow-right-circle',
+    'arrow-right',
+    'arrow-up-circle',
+    'arrow-up',
+    'chevron-down-circle',
+    'chevron-left-circle',
+    'chevron-right-circle',
+    'chevron-up-circle',
+    'cross',
+    'minus',
+    'plus',
+    'search',
+    'tick',
+    'user'
+  ]
+}

shared/lib/index.mjs

@@ -3,4 +3,5 @@
  */
 export * as components from './components.mjs'
 export * as files from './files.mjs'
+export * as icons from './icons.mjs'
 export * as screenshots from './screenshots.mjs'