Merge branch 'main' of https://github.com/coreui/coreui-icons-react into HEAD

Author: mrholek

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/icons-react",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "description": "Official React component for CoreUI Icons",
   "keywords": [
     "coreui",
@@ -13,13 +13,13 @@
     "component",
     "react"
   ],
-  "homepage": "https://icons.coreui.io",
+  "homepage": "https://coreui.io/react/docs/components/icon/",
   "bugs": {
-    "url": "https://github.com/coreui/coreui-icons/issues"
+    "url": "https://github.com/coreui/coreui-icons-react/issues"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/coreui/coreui-icons.git"
+    "url": "https://github.com/coreui/coreui-icons-react.git"
   },
   "license": "MIT",
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",

src/CIcon.css

@@ -75,4 +75,17 @@
   width: 0.875rem;
   height: 0.875rem;
   font-size: 0.875rem;
+}
+
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+  position: absolute!important;
+  width: 1px!important;
+  height: 1px!important;
+  padding: 0!important;
+  margin: -1px!important;
+  overflow: hidden!important;
+  clip: rect(0,0,0,0)!important;
+  white-space: nowrap!important;
+  border: 0!important;
 }

src/CIcon.tsx

@@ -3,7 +3,7 @@ import React, { HTMLAttributes, forwardRef, useState, useMemo } from 'react'
 import classNames from 'classnames'
 import './CIcon.css'
 
-export interface CIconProps extends HTMLAttributes<SVGSVGElement> {
+export interface CIconProps extends Omit<HTMLAttributes<SVGSVGElement>, 'content'> {
   /**
    * A string of all className you want applied to the component.
    */
@@ -17,7 +17,7 @@ export interface CIconProps extends HTMLAttributes<SVGSVGElement> {
   /**
    * Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.
    */
-  customClassName?: string | string[] // eslint-disable-line @typescript-eslint/ban-types
+  customClassName?: string | string[]
   /**
    * Name of the icon placed in React object or SVG content.
    */
@@ -136,30 +136,37 @@ export const CIcon = forwardRef<SVGSVGElement, CIconProps>(
           className,
         )
 
-    return use ? (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className={_className}
-        {...(height && { height: height })}
-        {...(width && { width: width })}
-        role="img"
-        {...rest}
-        ref={ref}
-      >
-        <use href={use}></use>
-      </svg>
-    ) : (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox={viewBox}
-        className={_className}
-        {...(height && { height: height })}
-        {...(width && { width: width })}
-        role="img"
-        dangerouslySetInnerHTML={{ __html: titleCode + iconCode }}
-        {...rest}
-        ref={ref}
-      />
+    return (
+      <>
+        {use ? (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className={_className}
+            {...(height && { height: height })}
+            {...(width && { width: width })}
+            role="img"
+            aria-hidden="true"
+            {...rest}
+            ref={ref}
+          >
+            <use href={use}></use>
+          </svg>
+        ) : (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox={viewBox}
+            className={_className}
+            {...(height && { height: height })}
+            {...(width && { width: width })}
+            role="img"
+            aria-hidden="true"
+            dangerouslySetInnerHTML={{ __html: titleCode + iconCode }}
+            {...rest}
+            ref={ref}
+          />
+        )}
+        {title && <span className="visually-hidden">{title}</span>}
+      </>
     )
   },
 )