fix: CIconRaw fixes:

- fix component classes,
- fix toCamelCase function,
- delete tag prop,
- optimize component,
- clean component

Author: woothu

src/CIconRaw.js

@@ -1,15 +1,20 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {mapToCssModules, colog} from './Shared/helper';
-import style from './CIcon.module.css';
+import React, { useMemo, useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { mapToCssModules, colog } from './Shared/helper'
 
-//component - CoreUI / CIconRaw
+const toCamelCase = (str) => {
+  return str.replace(/([-_][a-z0-9])/ig, ($1) => {
+    return $1.toUpperCase()
+  }).replaceAll('-', '')
+}
 
-const CIconRaw = props=>{
+//component - CoreUI / CIconRaw
+const CIconRaw = props => {
 
   const {
     className,
+    cssModule,
     //
     name,
     content,
@@ -19,120 +24,102 @@ const CIconRaw = props=>{
     title,
     use,
     ...attributes
-  } = props;
-
-  // methods
+  } = props
 
-  const toCamelCase = (str)=>{
-    return str.replace(/([-_][a-z0-9])/ig, ($1) => {
-      return $1.toUpperCase().replace('-', '')
-    })
-  };
+  const [change, setChange] = useState(0)
 
-  //vars
+  useMemo(() => setChange(change + 1), [name, JSON.stringify[content]])
 
-  const iconName = (()=>{
+  const iconName = useMemo(()=>{
     const iconNameIsKebabCase = name && name.includes('-');
     return iconNameIsKebabCase ? toCamelCase(name) : name
-  })();
-  const titleCode = (()=>{
-      return title ? `<title>${title}</title>` : ''
-  })();
-  const code = (()=>{
+  }, [change])
+
+  const titleCode = title ? `<title>${title}</title>` : ''
+
+  const code = useMemo(() => {
     if (content) {
       return content
-    } else if (React.icons) {
-      return React.icons[iconName] ?
-        React.icons[iconName] :
-          React.icons['cil'+iconName] ?
-            React.icons['cil'+iconName] :
-              colog('Not existing icon: '+iconName)
+    } else if (name && React.icons) {
+      return React.icons[iconName] ? React.icons[iconName] :
+        colog('Not existing icon: '+ iconName + ' in React.icons object')
     }
-    return content;
-  })();
-  const iconCode = (()=>{
+  }, [change])
+
+  const iconCode = useMemo(()=>{
     return Array.isArray(code) ? code[1] || code[0] : code
-  })();
+  }, [change])
+
   const scale = (()=>{
     return Array.isArray(code) && code.length > 1 ? code[0] : '64 64'
-  })();
+  })()
+
   const viewBox = (()=>{
     return attributes.viewBox || `0 0 ${scale}`
-  })();
+  })()
+
   const computedSize = (()=>{
     const addCustom = !size && (attributes.width || attributes.height);
     return size === 'custom' || addCustom ? 'custom-size' : size
-  })();
-  //console.log(iconName, computedSize)
-/*
-  computedClasses () {
-      const size = this.computedSize
-      return this.customClasses || ['c-icon', { [`c-icon-${size}`]: size }]
-    }
-*/
+  })()
 
   //render
-
-  const class1 = mapToCssModules(classNames(
-    className,
+  const computedClasses = mapToCssModules(classNames(
     'c-icon',
-    computedSize ? `c-icon-${computedSize}` : ''
-  ));
-
-  const class2 = mapToCssModules(classNames(
-    'c-icon',
-    computedSize ? `c-icon-${computedSize}` : ''
-  ), style);
-
-  const classes = customClasses || (class1 + ' ' + class2);
+    computedSize && `c-icon-${computedSize}`,
+    className
+  ), cssModule)
 
-  //console.log(code, viewBox, classes, titleCode+' - '+iconCode);
-  //v-html={titleCode+iconCode}
+  const classes = customClasses || computedClasses
 
   return (
     <React.Fragment>
-      {!src && !use ?
-      <svg
-        {...attributes}
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox={viewBox}
-        className={classes}
-        role="img"
-        dangerouslySetInnerHTML={{__html: titleCode+iconCode}}
-      ></svg> : src ?
-      <img
-        {...attributes}
-        src={src}
-        role="img"
-      /> : use ?
-      <svg
-        {...attributes}
-        xmlns="http://www.w3.org/2000/svg"
-        className={classes}
-        role="img"
-      >
-        <use href={use}></use>
-      </svg> : ''}
+      { !src && !use &&
+        <svg
+          {...attributes}
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox={viewBox}
+          className={classes}
+          role="img"
+          dangerouslySetInnerHTML={{__html: titleCode + iconCode}}
+        />
+      }
+      { src && !use &&
+        <img
+          {...attributes}
+          className={className}
+          src={src}
+          role="img"
+        />
+      }
+      { !src && use &&
+        <svg
+          {...attributes}
+          xmlns="http://www.w3.org/2000/svg"
+          className={classes}
+          role="img"
+        >
+          <use href={use}></use>
+        </svg>
+      }
     </React.Fragment>
-  );
-
-};
+  )
+}
 
 CIconRaw.propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   className: PropTypes.string,
+  cssModule: PropTypes.object,
   //
   name: PropTypes.string,
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-  size: PropTypes.oneOf(['custom', 'custom-size', 'sm', 'lg', 'xl',
-      '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl']),
+  size: PropTypes.oneOf([
+    'custom', 'custom-size', 'sm', 'lg', 'xl',
+    '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl'
+  ]),
   customClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
   src: PropTypes.string,
   title: PropTypes.string,
   use: PropTypes.string
 };
 
-CIconRaw.defaultProps = {
-};
-
-export default CIconRaw;
+export default CIconRaw

src/Shared/helper.js

@@ -12,8 +12,9 @@ const mapToCssModules = (className = '', cssModule = globalCssModule) => {
 export {mapToCssModules};
 
 export function colog() {
-  if (process.env.NODE_ENV === 'development')
+  if (process && process.env && process.env.NODE_ENV === 'development') {
     console.log.apply(this, arguments);
+  }
 }