perf(icons): only import the icons of the DS

baloise · Oct 24, 2022 · 9f6bb59 · 9f6bb59
1 parent 556e215
commit 9f6bb59
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 4 deletions.
diff --git a/.build/optimize-icons.js b/.build/optimize-icons.js
@@ -15,6 +15,7 @@ const { NEWLINE } = require('./utils/constants')
 
 const DIRNAME = path.normalize(__dirname);
 const PACKAGE = path.join(DIRNAME, "../packages/icons");
+const DSPATH = path.join(DIRNAME, "../packages/components");
 
 const readSVG = async (name, filePath) => {
   let svgContent = ''
@@ -93,6 +94,36 @@ const main = async () => {
   contents.forEach(async (value, key) => {
     await file.save(path.join(PACKAGE, 'svg', `${key}.svg`), value, false)
   })
+
+  const dsLines = [
+    '/* eslint-disable prettier/prettier */',
+    '// generated file by .build/optimize-icons.js',
+    '',
+  ]
+
+  const dsIcons = [
+    'balIconClose',
+    'balIconInfoCircle',
+    'balIconPlus',
+    'balIconNavGoLeft',
+    'balIconNavGoRight',
+    'balIconCaretLeft',
+    'balIconCaretDown',
+    'balIconCheck',
+    'balIconDate',
+    'balIconDocument',
+  ]
+
+  contents.forEach((value, key) => {
+    const iconName = `balIcon${upperFirst(camelCase(key))}`
+    if(dsIcons.includes(iconName)){
+      dsLines.push(`export const ${iconName} = /*#__PURE__*/ '${value}';`)
+      dsLines.push(``)
+    }
+  })
+
+  await file.save(path.join(DSPATH, 'src/utils/constants/icons.constant.ts'), dsLines.join(NEWLINE))
+
 }
 
 main()
diff --git a/packages/components/src/utils/config/config.ts b/packages/components/src/utils/config/config.ts
@@ -13,7 +13,7 @@ import {
   balIconCheck,
   balIconDate,
   balIconDocument,
-} from '@baloise/design-system-icons'
+} from '../constants/icons.constant'
 
 export class Config {
   private _componentObservers: BalConfigObserver[] = []

diff --git a/packages/components/src/utils/config/initialize.ts b/packages/components/src/utils/config/initialize.ts
@@ -12,7 +12,7 @@ import {
   balIconCheck,
   balIconDate,
   balIconDocument,
-} from '@baloise/design-system-icons'
+} from '../constants/icons.constant'
 
 export const defaultConfig: BalConfigState = {
   region: 'CH',

diff --git a/packages/components/src/utils/constants/icons.constant.ts b/packages/components/src/utils/constants/icons.constant.ts
@@ -0,0 +1,32 @@
+/* eslint-disable prettier/prettier */
+// generated file by .build/optimize-icons.js
+
+export const balIconCaretDown =
+  /*#__PURE__*/ '<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><path d="M5,7.874a1.238,1.238,0,0,1-.879-.364L.206,3.393A.75.75,0,1,1,1.294,2.36L4.819,6.072a.249.249,0,0,0,.362,0L8.706,2.36A.75.75,0,1,1,9.794,3.393L5.9,7.5A1.269,1.269,0,0,1,5,7.874Z" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/></svg>'
+
+export const balIconCaretLeft =
+  /*#__PURE__*/ '<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><path d="M7.124,10a.749.749,0,0,1-.517-.206L2.5,5.9A1.257,1.257,0,0,1,2.49,4.116L6.607.206A.75.75,0,1,1,7.64,1.294L3.928,4.819a.249.249,0,0,0,0,.362L7.64,8.706A.75.75,0,0,1,7.124,10Z" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/></svg>'
+
+export const balIconCheck =
+  /*#__PURE__*/ '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path fill-rule="evenodd" d="M13.637 1.19792C14.0627 1.54974 14.1227 2.18006 13.7708 2.60579L5.73084 12.335L5.72842 12.3379C5.54554 12.5575 5.31602 12.7336 5.05655 12.8534C4.79707 12.9731 4.51417 13.0336 4.22842 13.0302L4.22752 13.0302C3.93709 13.0266 3.65125 12.9573 3.39146 12.8274C3.13254 12.6979 2.9062 12.5117 2.72931 12.2826C2.72871 12.2818 2.72812 12.281 2.72752 12.2802L0.210633 9.04426C-0.128437 8.60831 -0.0499029 7.98003 0.386044 7.64096C0.821992 7.30189 1.45027 7.38043 1.78934 7.81638L4.25291 10.9838L12.2291 1.33176C12.5809 0.906034 13.2113 0.846112 13.637 1.19792Z" clip-rule="evenodd"/></svg>'
+
+export const balIconClose =
+  /*#__PURE__*/ '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path fill-rule="evenodd" d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893Z" clip-rule="evenodd"/></svg>'
+
+export const balIconDate =
+  /*#__PURE__*/ '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path fill-rule="evenodd" d="M10 0a.75.75 0 0 1 .75.75v.75h1.5c.966 0 1.75.784 1.75 1.75v9A1.75 1.75 0 0 1 12.25 14H1.75A1.75 1.75 0 0 1 0 12.25v-9C0 2.284.784 1.5 1.75 1.5h1.5V.75a.75.75 0 0 1 1.5 0v.75h4.5V.75A.75.75 0 0 1 10 0zM3.25 3v.75a.75.75 0 0 0 1.5 0V3h4.5v.75a.75.75 0 0 0 1.5 0V3h1.5a.25.25 0 0 1 .25.25v2.282a1.002 1.002 0 0 0-.25-.032H1.75c-.086 0-.17.01-.25.032V3.25A.25.25 0 0 1 1.75 3h1.5z" clip-rule="evenodd"/></svg>'
+
+export const balIconDocument =
+  /*#__PURE__*/ '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path fill-rule="evenodd" d="M1.43934 0.43934C1.72064 0.158035 2.10218 0 2.5 0H7.5C7.63261 0 7.75979 0.0526784 7.85355 0.146447L12.8536 5.14645C12.9473 5.24021 13 5.36739 13 5.5V12.5C13 12.8978 12.842 13.2794 12.5607 13.5607C12.2794 13.842 11.8978 14 11.5 14H2.5C2.10217 14 1.72064 13.842 1.43934 13.5607C1.15804 13.2794 1 12.8978 1 12.5V1.5C1 1.10218 1.15804 0.720644 1.43934 0.43934ZM4.5 3.875C4.15482 3.875 3.875 4.15482 3.875 4.5C3.875 4.84518 4.15482 5.125 4.5 5.125H6.5C6.84518 5.125 7.125 4.84518 7.125 4.5C7.125 4.15482 6.84518 3.875 6.5 3.875H4.5ZM3.875 7.5C3.875 7.15482 4.15482 6.875 4.5 6.875H9.5C9.84518 6.875 10.125 7.15482 10.125 7.5C10.125 7.84518 9.84518 8.125 9.5 8.125H4.5C4.15482 8.125 3.875 7.84518 3.875 7.5ZM4.5 9.875C4.15482 9.875 3.875 10.1548 3.875 10.5C3.875 10.8452 4.15482 11.125 4.5 11.125H9.5C9.84518 11.125 10.125 10.8452 10.125 10.5C10.125 10.1548 9.84518 9.875 9.5 9.875H4.5Z" clip-rule="evenodd"/></svg>'
+
+export const balIconInfoCircle =
+  /*#__PURE__*/ '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path fill-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM5.5 9.375C5.15482 9.375 4.875 9.65482 4.875 10C4.875 10.3452 5.15482 10.625 5.5 10.625H7H8.5C8.84518 10.625 9.125 10.3452 9.125 10C9.125 9.65482 8.84518 9.375 8.5 9.375H7.625V6.5C7.625 6.15482 7.34518 5.875 7 5.875H6C5.65482 5.875 5.375 6.15482 5.375 6.5C5.375 6.84518 5.65482 7.125 6 7.125H6.375V9.375H5.5ZM8 4C8 4.55228 7.55228 5 7 5C6.44772 5 6 4.55228 6 4C6 3.44772 6.44772 3 7 3C7.55228 3 8 3.44772 8 4Z" clip-rule="evenodd"/></svg>'
+
+export const balIconNavGoLeft =
+  /*#__PURE__*/ '<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><path d="M7.124,10a.749.749,0,0,1-.517-.206L2.5,5.9A1.257,1.257,0,0,1,2.49,4.116L6.607.206A.75.75,0,1,1,7.64,1.294L3.928,4.819a.249.249,0,0,0,0,.362L7.64,8.706A.75.75,0,0,1,7.124,10Z" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/></svg>'
+
+export const balIconNavGoRight =
+  /*#__PURE__*/ '<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><path d="M7.5,4.1l-4.1-3.9A.75.75,0,1,0,2.36,1.294L6.072,4.819a.249.249,0,0,1,0,.362L2.36,8.706A.75.75,0,0,0,3.393,9.794L7.51,5.884A1.256,1.256,0,0,0,7.5,4.1Z" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/></svg>'
+
+export const balIconPlus =
+  /*#__PURE__*/ '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path fill-rule="evenodd" d="M8 1C8 0.447715 7.55228 0 7 0C6.44772 0 6 0.447715 6 1V6H1C0.447715 6 0 6.44772 0 7C0 7.55228 0.447715 8 1 8H6V13C6 13.5523 6.44772 14 7 14C7.55228 14 8 13.5523 8 13V8H13C13.5523 8 14 7.55228 14 7C14 6.44772 13.5523 6 13 6H8V1Z" clip-rule="evenodd"/></svg>'
diff --git a/rollup.base.js b/rollup.base.js
@@ -66,7 +66,12 @@ export default ({ styleOutput, declarationDir, cleanTargets, input, target } = {
     resolve(),
     commonjs(),
     peerDepsExternal(),
-    typescript({ declaration: true, declarationDir: declarationDir || 'dist/types', outDir: target || 'dist' }),
+    typescript({
+      removeComments: true,
+      declaration: true,
+      declarationDir: declarationDir || 'dist/types',
+      outDir: target || 'dist',
+    }),
     sass({
       output: styleOutput || 'dist/styles.css',
       options: {

diff --git a/tsconfig.base.json b/tsconfig.base.json
@@ -21,7 +21,7 @@
     "noUnusedLocals": false,
     "noUnusedParameters": true,
     "pretty": true,
-    "removeComments": false,
+    "removeComments": true,
     "inlineSources": true,
     "sourceMap": true
   },