- update: new ts version of CIcon

Author: Tomasz John

src/CIcon.tsx

@@ -1,55 +1,84 @@
-import React, { useMemo, useState } from 'react'
-import PropTypes from 'prop-types'
+import React, { HTMLAttributes, FC, useState, useMemo } from 'react'
 import classNames from 'classnames'
 import './CIcon.css'
 
+export interface CIconProps extends HTMLAttributes<SVGSVGElement> {
+  /**
+   * A string of all className you want applied to the component. [docs]
+   */
+  className?: string
+  /**
+   * Name of the icon placed in React object. [docs]
+   */
+  name?: string
+  /**
+   * Icon SVG content. [docs]
+   */
+  content?: string | Array<string>
+  /**
+   * Size of the icon. Available sizes: 'sm', 'lg', 'xl', '2xl'...'9xl', 'custom', 'custom-size'. [docs]
+   */
+  size?: 'custom'|'custom-size'|'sm'|'lg'|'xl'|'2xl'|'3xl'|'4xl'|'5xl'|'6xl'|'7xl'|'8xl'|'9xl'
+  /**
+   * Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. [docs]
+   */
+  customClasses?: string | object | Array<string>
+  /**
+   * Link to the icon. If defined component will be rendered as 'img' tag. [docs]
+   */
+  src?: string
+  /**
+   * If defined component will be rendered using 'use' tag. [docs]
+   */
+  use?: string
+  /**
+   * Title tag content. [docs]
+   */
+  title?: string
+}
+
 let warned = {}
-const colog = (msg, icon) => {
-  if (!warned[icon] && process && process.env && process.env.NODE_ENV === 'development') {
+const colog = (msg: string, icon?: string) => {
+  if (icon && !warned[icon] && process && process.env && process.env.NODE_ENV === 'development') {
     warned[icon] = true
     console.error(msg)
   }
 }
 
-const toCamelCase = (str) => {
+const toCamelCase = (str: string) => {
   return str.replace(/([-_][a-z0-9])/ig, ($1) => {
     return $1.toUpperCase()
   }).replace(/-/ig, '')
 }
 
 //component - CoreUI / CIcon
-const CIcon = props => {
-
-  const {
-    className,
-    name,
-    content,
-    customClasses,
-    size,
-    src,
-    title,
-    use,
-    ...attributes
-  } = props
+const CIcon: FC<CIconProps> = ({
+  className,
+  name,
+  content,
+  customClasses,
+  size,
+  src,
+  title,
+  use,
+  ...rest
+}) => {
 
   const [change, setChange] = useState(0)
 
-  useMemo(() => setChange(change + 1), [name, JSON.stringify[content]])
+  useMemo(() => setChange(change + 1), [name, JSON.stringify(content)])
 
-  const iconName = useMemo(()=>{
-    const iconNameIsKebabCase = name && name.includes('-')
-    return iconNameIsKebabCase ? toCamelCase(name) : name
-  }, [change])
+  const iconName = useMemo(() => ( name && name.includes('-') ) ? toCamelCase(name) : name, [change])
 
   const titleCode = title ? `<title>${title}</title>` : ''
 
   const code = useMemo(() => {
     if (content) {
       return content
-    } else if (name && React.icons) {
-      return React.icons[iconName] ? React.icons[iconName] :
+    } else if (name && React['icons']) {
+      return React['icons'][iconName] ? React['icons'][iconName] :
         colog(`CIcon component: icon name '${iconName}' does not exist in React.icons object. ` +
-              `To use icons by 'name' prop you need to make them available globally ` + 
+              `To use icons by 'name' prop you need to make them available globally ` +
               `by adding them to React.icons object. CIcon component docs: https://coreui.io/react/docs/components/CIcon \n`,
               iconName
             )
@@ -65,28 +94,38 @@ const CIcon = props => {
   })()
 
   const viewBox = (()=>{
-    return attributes.viewBox || `0 0 ${scale}`
+    return rest['viewBox'] || `0 0 ${scale}`
   })()
 
-  const computedSize = (()=>{
-    const addCustom = !size && (attributes.width || attributes.height)
-    return size === 'custom' || addCustom ? 'custom-size' : size
-  })()
+  // render
 
-  //render
-  const computedClasses = classNames(
-    'c-icon',
-    computedSize && `c-icon-${computedSize}`,
-    className
-  )
+  let classes
 
-  const classes = customClasses || computedClasses
+  if (customClasses) {
+    classes = classNames(
+      customClasses
+    )
+  }
+  else
+  {
+    const computedSize = (()=>{
+      const addCustom = !size && (rest['width'] || rest['height'])
+      return size === 'custom' || addCustom ? 'custom-size' : size
+    })()
+    classes = classNames(
+      'c-icon',
+      computedSize && `c-icon-${computedSize}`,
+      className
+    )
+  }
+
+  //const classes =  customClasses || computedClasses
 
   return (
     <React.Fragment>
       { !src && !use &&
         <svg
-          {...attributes}
+          {...rest}
           xmlns="http://www.w3.org/2000/svg"
           viewBox={viewBox}
           className={classes}
@@ -96,15 +135,14 @@ const CIcon = props => {
       }
       { src && !use &&
         <img
-          {...attributes}
           className={className}
           src={src}
           role="img"
         />
       }
       { !src && use &&
         <svg
-          {...attributes}
+          {...rest}
           xmlns="http://www.w3.org/2000/svg"
           className={classes}
           role="img"
@@ -114,25 +152,14 @@ const CIcon = props => {
       }
     </React.Fragment>
   )
-}
 
-CIcon.propTypes = {
-  className: PropTypes.string,
-  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'
-  ]),
-  customClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
-  src: PropTypes.string,
-  title: PropTypes.string,
-  use: PropTypes.string
 }
 
 export default CIcon
 
-export const CIconWarn = props => {
+//
+
+export const CIconWarn: FC<CIconProps> = (props) => {
   colog(
     '@coreui/icons-react: Please use default export since named exports are deprecated'
   )