Merge pull request #17 from EOS-uiux-Solutions/class

Fix: className prop causing non treeshaking effect

Author: vinayaksh42

package.json

@@ -101,8 +101,5 @@
   "files": [
     "es",
     "lib"
-  ],
-  "dependencies": {
-    "classnames": "^2.3.1"
-  }
+  ]
 }

scripts/iconCommonScript.ts

@@ -30,7 +30,7 @@ async function generateIconCommonComponents ({ type, from }: IconGenerateScript)
         }
 
         // eslint-disable-next-line no-template-curly-in-string
-        const propString = 'svg className={classString} data-testid="eos-svg-component" transform={`rotate(${rotate}) translate(${translateX}, ${translateY}) scale(${scaleX}, ${scaleY})`} fill={color} width={size} height={size}'
+        const propString = 'svg className={className} data-testid="eos-svg-component" transform={`rotate(${rotate}) translate(${translateX}, ${translateY}) scale(${scaleX}, ${scaleY})`} fill={color} width={size} height={size}'
         filled = filled.replace('svg', propString)
         outlined = outlined.replace('svg', propString)
 

scripts/iconScript.ts

@@ -27,7 +27,7 @@ async function generateIconComponents ({ type, from }: IconGenerateScript) {
       }
 
       // eslint-disable-next-line no-template-curly-in-string
-      const propString = 'svg className={classString} data-testid="eos-svg-component" transform={`rotate(${rotate}) translate(${translateX}, ${translateY}) scale(${scaleX}, ${scaleY})`} fill={color} width={size} height={size}'
+      const propString = 'svg className={className} data-testid="eos-svg-component" transform={`rotate(${rotate}) translate(${translateX}, ${translateY}) scale(${scaleX}, ${scaleY})`} fill={color} width={size} height={size}'
       data = data.replace('svg', propString)
 
       const render = componentTemplate({ fileName, data })

template/iconCommonComponent.ts

@@ -9,15 +9,13 @@ function componentCommonTemplate ({ fileName, filled, outlined }:CommonTemplateP
 import * as React from 'react';
 import { IconCommonProps, valuesMap } from '../helper';
 import { flipFunction } from '../flipFunction';
-import classNames from 'classnames';
 
-function EOS_${fileName}({size = "${iconData.iconDefault.size}", color = "${iconData.iconDefault.color}", rotate = ${iconData.iconDefault.rotate}, horizontalFlip = ${iconData.iconDefault.horizontalFlip}, verticalFlip = ${iconData.iconDefault.verticalFlip}, theme = "${iconData.iconDefault.theme}", className}: IconCommonProps) {
+function EOS_${fileName}({size = "${iconData.iconDefault.size}", color = "${iconData.iconDefault.color}", rotate = ${iconData.iconDefault.rotate}, horizontalFlip = ${iconData.iconDefault.horizontalFlip}, verticalFlip = ${iconData.iconDefault.verticalFlip}, theme = "${iconData.iconDefault.theme}", className = ""}: IconCommonProps) {
     const sizeString: string = size.toString()
     if(Object.keys(valuesMap).includes(sizeString)) {
         size = valuesMap[size]
     }
     const { scaleX, scaleY, translateX, translateY } = flipFunction({horizontalFlip,verticalFlip})
-    const classString = classNames(className);
 return (
     <>
     {

template/iconComponent.ts

@@ -8,15 +8,13 @@ function componentTemplate ({ fileName, data }:TemplateProps) {
 import * as React from 'react';
 import { IconProps, valuesMap } from '../helper';
 import { flipFunction } from '../flipFunction';
-import classNames from 'classnames';
 
-function EOS_${fileName}({size = "${iconData.iconDefault.size}", color = "${iconData.iconDefault.color}", rotate = ${iconData.iconDefault.rotate}, horizontalFlip = ${iconData.iconDefault.horizontalFlip}, verticalFlip = ${iconData.iconDefault.verticalFlip}, className}: IconProps) {
+function EOS_${fileName}({size = "${iconData.iconDefault.size}", color = "${iconData.iconDefault.color}", rotate = ${iconData.iconDefault.rotate}, horizontalFlip = ${iconData.iconDefault.horizontalFlip}, verticalFlip = ${iconData.iconDefault.verticalFlip}, className = ""}: IconProps) {
     const sizeString: string = size.toString()
     if(Object.keys(valuesMap).includes(sizeString)) {
         size = valuesMap[size]
     }
     const { scaleX, scaleY, translateX, translateY } = flipFunction({horizontalFlip,verticalFlip})
-    const classString = classNames(className);
 return (
     ${data}
     );