Merge pull request #106 from coreui/dev-v2.5.7-nav-icon-fix

v2.5.7

Author: xidedix

CHANGELOG.md

@@ -1,5 +1,8 @@
 ### [@coreui/react](https://coreui.io/) changelog
 
+##### `v2.5.7`
+- fix(SidebarNav): add missing alternative icon config object
+
 ##### `v2.5.6`
 - fix(SidebarNav): navigate to route on AppSideBarNav parent menu click - thanx @regimani #98 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "2.5.6",
+  "version": "2.5.7",
   "description": "CoreUI React Bootstrap 4 components",
   "license": "MIT",
   "author": {

src/SidebarNav.md

@@ -55,6 +55,17 @@ router | inject `react-router-dom@5` object | _mandatory for @coreui/react ^2.5.
 },
 ```
 
+- item.icon: string (css class string for <i> tag)
+```json5
+icon: 'icon-speedometer' // css class string for <i> tag
+```
+- item.icon: { class, innerText, attributes }  
+  (v2.5.7 up alternative icon config object)
+```json5
+icon: { class: 'material-icons', innerText: 'insert_emoticon', attributes: { title: 'smiley' }} 
+```
+---
+
 __React Router Link `url`__
 
 `url: string` - a string representation of the Link location, created by concatenating the location’s pathname, search, and hash properties.  

src/SidebarNav2.js

@@ -130,7 +130,7 @@ class AppSidebarNav2 extends Component {
 
   // nav dropdown
   navDropdown(item, key) {
-    const classIcon = classNames('nav-icon', item.icon);
+    const itemIcon = this.navIcon(item)
     const attributes = this.getAttribs(item.attributes);
     const classes = classNames('nav-link', 'nav-dropdown-toggle', item.class, attributes.class, attributes.className);
     delete attributes.class;
@@ -148,8 +148,7 @@ class AppSidebarNav2 extends Component {
                  to={item.url || ''}
                  {...attributes}
                  onClick={(e) => this.handleClick(e, item)}>
-          <i className={classIcon}/>
-          {item.name}{this.navBadge(item.badge)}
+          {itemIcon}{item.name}{this.navBadge(item.badge)}
         </NavLink>
         <ul className="nav-dropdown-items">
           {this.navList(item.children)}
@@ -169,11 +168,26 @@ class AppSidebarNav2 extends Component {
     );
   }
 
+  navIcon(item) {
+    const icon = item.icon;
+    const iconObject = (typeof icon === 'object' && (icon !== null)) ? {iconClass: icon.class, iconClassName: icon.className, ...icon} : { iconClass: icon };
+    const {iconClass, iconClassName, innerText, img, attributes} = iconObject;
+    const iconAttr = {...attributes};
+    delete iconAttr.class;
+    delete iconAttr.className;
+    delete iconAttr.img;
+    const iconImg = img && img.src ? img : null;
+    const iconInner = innerText || null;
+    const classIcon = classNames('nav-icon', iconClass, iconClassName);
+    const iconComponent = iconImg ? <img {...iconAttr} className={classIcon} src={iconImg.src} /> : <i {...iconAttr} className={classIcon}>{iconInner}</i>
+    return (iconComponent)
+  }
+
   // nav link
   navLink(item, key, classes) {
     const ref = React.createRef();
     const url = item.url || '';
-    const itemIcon = <i className={classes.icon} />
+    const itemIcon = this.navIcon(item)
     const itemBadge = this.navBadge(item.badge)
     const attributes = this.getAttribs(item.attributes)
     classes.link = classNames(classes.link, attributes.class, attributes.className)