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

[React Package] added custom class

Author: kaybhutani

README.md

@@ -43,7 +43,7 @@ import { EOS_LOADING_ANIMATED } from 'eos-icons-react';
 import { EOS_LOADING_ANIMATED } from 'eos-icons-react';
 
 # The below icons will have the color #FF5733, size xxl and a rotation of 45 degree
-<EOS_LOADING_ANIMATED color="#FF5733" size="xxl" rotate={45}/>
+<EOS_LOADING_ANIMATED color="#FF5733" size="xxl" rotate={45} className="icon"/>
 ```
 
 #### Prop Details
@@ -55,6 +55,7 @@ import { EOS_LOADING_ANIMATED } from 'eos-icons-react';
 | horizontalFlip | boolean | false | Flips icon horizontally |
 | verticalFlip | boolean | false | Flips icon vertically |
 | theme | string | 'filled' | sets icon theme (only available for common components)** |
+| className | string | '' | sets custom styling class for icon component |
 
 > (*) Size can be provided using either string or number. Pre-Defined size list
 

package-lock.json

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

package.json

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

scripts/iconCommonScript.ts

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

scripts/iconScript.ts

@@ -9,13 +9,15 @@ 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}"}: 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/iconCommonComponent.ts

@@ -8,13 +8,15 @@ 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}}: 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}
     );

template/iconComponent.ts

@@ -4,7 +4,8 @@ export interface IconProps {
     color?: string,
     rotate?: string | number,
     horizontalFlip?: boolean,
-    verticalFlip?: boolean
+    verticalFlip?: boolean,
+    className?: string
 }
 
 // Interface for Common React SVG components
@@ -14,7 +15,8 @@ export interface IconCommonProps {
   rotate?: string | number,
   horizontalFlip?: boolean,
   verticalFlip?: boolean,
-  theme?: string
+  theme?: string,
+  className?: string
 }
 
 export interface ValueMap {