Boxen — A Kit of Parts Squarespace Developer SDK

SVG, Webpack and Blocks


I like to use SVGs for a lot of things. Logos and UI icons are among the most common use cases for SVGs on the web. At minimum, Boxen uses SVGs for these as well. Since Boxen uses ProperJS for the Client-side application programming, it’s nice to have one SVG available for use in the sqs template files as well as within the ProperJS view files.


To accomplish this Boxen uses the svg-inline-loader for Webpack. To create reusable SVG template partials for sqs we use Block files. To make an SVG graphic called “logo” for Boxen we use a file called svg-logo.block in the blocks directory. To import that SVG in a sqs template file:

  {@|apply svg-logo.block}

And to import that SVG into a ProperJS view file:

  const svgLogo = require( `../../../blocks/svg-logo.block` );

Using this system Boxen lets you catalogue all your project SVGs in one place and use them anywhere in your SDK coding.

Next up: System Blocks

Boxen — A Kit of Parts Squarespace Developer SDK

SVG, Webpack and Blocks


I like to use SVGs for a lot of things. Logos and UI icons are among the most common use cases for SVGs on the web. At minimum, Boxen uses SVGs for these as well. Since Boxen uses ProperJS for the Client-side application programming, it’s nice to have one SVG available for use in the sqs template files as well as within the ProperJS view files.


To accomplish this Boxen uses the svg-inline-loader for Webpack. To create reusable SVG template partials for sqs we use Block files. To make an SVG graphic called “logo” for Boxen we use a file called svg-logo.block in the blocks directory. To import that SVG in a sqs template file:

  {@|apply svg-logo.block}

And to import that SVG into a ProperJS view file:

  const svgLogo = require( `../../../blocks/svg-logo.block` );

Using this system Boxen lets you catalogue all your project SVGs in one place and use them anywhere in your SDK coding.

Next up: System Blocks