Update SVG build script to set custom dimensions

This removes the fixed width and height override from the build script and instead detects the viewBox values and sets the width and height from there. The goal of this is allow for different aspect ratios in icons. My gut says everything should be 16px tall to address vertical align issues, but then have some variable width.

To start, this will be for select icons (possibly the new Bootstrap logo and our upcoming badge icons), and then potentially redoing artboards in Figma for super narrow icons so they only take up the required space. That'll come later I think though.

build/build-svgs.js

@@ -13,9 +13,6 @@ const iconsDir = path.join(__dirname, '../icons/')
 
 const svgAttributes = {
   class: '',
-  width: '1em',
-  height: '1em',
-  viewBox: '0 0 16 16',
   fill: 'currentColor',
   xmlns: 'http://www.w3.org/2000/svg'
 }
@@ -53,6 +50,13 @@ const processFile = (file, config) => new Promise((resolve, reject) => {
             $(svg).attr(attr, val)
           }
 
+          const dimensions = $(svg).attr('viewBox').split(' ')
+          const svgWidth = dimensions[2] / 16
+          const svgHeight = dimensions[3] / 16
+
+          $(svg).attr('width', `${svgWidth}em`)
+          $(svg).attr('height', `${svgHeight}em`)
+
           $(svg).attr('class', `bi bi-${path.basename(file, '.svg')}`)
 
           fs.writeFile(file, $(svg), 'utf8')