Change width and height from 1em to 16px

Fixes broken rendering of 1x1px when opening current icons in Sketch, Illustrator, etc. Also reprocesses icons to reorder the attributes.

Fixes #492

1 files changed, 5 insertions, 20 deletions

diff --git a/build/build-svgs.js b/build/build-svgs.js
index b8ff0002c..02312c09c 100644
--- a/build/build-svgs.js
+++ b/build/build-svgs.js
@@ -12,9 +12,12 @@ const yaml = require('js-yaml')
 const iconsDir = path.join(__dirname, '../icons/')
 
 const svgAttributes = {
-  class: '',
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: '16',
+  height: '16',
   fill: 'currentColor',
-  xmlns: 'http://www.w3.org/2000/svg'
+  class: '',
+  viewBox: '0 0 16 16'
 }
 
 const getSvgoConfig = async () => {
@@ -50,24 +53,6 @@ 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`)
-
-          // Todo: Pass argument to script to flip between ems and pixels.
-          // Until then, leaving code here—font-family generation requires
-          // use of pixels.
-
-          // const svgWidth = dimensions[2]
-          // const svgHeight = dimensions[3]
-
-          // $(svg).attr('width', `${svgWidth}`)
-          // $(svg).attr('height', `${svgHeight}`)
-
-
           $(svg).attr('class', `bi bi-${path.basename(file, '.svg')}`)
 
           fs.writeFile(file, $(svg).toString(), 'utf8')