diff --git a/packages/icons-react/.eslintignore b/packages/icons-react/.eslintignore
new file mode 100644
index 000000000..e6cf4bc30
--- /dev/null
+++ b/packages/icons-react/.eslintignore
@@ -0,0 +1,3 @@
+{
+ "ignorePatterns": [".eslintrc.js"]
+}
\ No newline at end of file
diff --git a/packages/icons-react/.eslintrc.js b/packages/icons-react/.eslintrc.js
new file mode 100644
index 000000000..b822b573f
--- /dev/null
+++ b/packages/icons-react/.eslintrc.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2013-present, creativeLabs Lukasz Holeczek.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict'
+
+module.exports = {
+ root: true, // So parent files don't get applied
+ env: {
+ es6: true,
+ browser: true,
+ node: true,
+ },
+ extends: [
+ 'plugin:react/recommended',
+ 'plugin:@typescript-eslint/recommended',
+ 'plugin:prettier/recommended',
+ ],
+ parser: '@typescript-eslint/parser',
+ parserOptions: {
+ ecmaVersion: 2020,
+ sourceType: 'module',
+ ecmaFeatures: {
+ jsx: true,
+ },
+ },
+ plugins: ['@typescript-eslint', 'react', 'react-hooks'],
+ settings: {
+ react: {
+ pragma: 'React',
+ version: 'detect',
+ },
+ },
+}
diff --git a/packages/icons-react/.prettierignore b/packages/icons-react/.prettierignore
new file mode 100644
index 000000000..849ddff3b
--- /dev/null
+++ b/packages/icons-react/.prettierignore
@@ -0,0 +1 @@
+dist/
diff --git a/packages/icons-react/.prettierrc.js b/packages/icons-react/.prettierrc.js
new file mode 100644
index 000000000..415ca0578
--- /dev/null
+++ b/packages/icons-react/.prettierrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+ semi: false,
+ trailingComma: "all",
+ singleQuote: true,
+ printWidth: 100,
+ tabWidth: 2
+};
\ No newline at end of file
diff --git a/packages/icons-react/CHANGELOG.md b/packages/icons-react/CHANGELOG.md
new file mode 100644
index 000000000..6e95d02bb
--- /dev/null
+++ b/packages/icons-react/CHANGELOG.md
@@ -0,0 +1,49 @@
+### [@coreui/icons-react](https://coreui.io/) changelog
+
+##### `1.1.0`
+- chore: update to React 17
+
+##### `1.0.0` - `1.0.3`
+- refactor: improve 'unregistered icon' error message
+- fix: change 'replaceAll' func to 'replace' due to transpilation error
+- test: more coverage
+- fix: typings
+- fix: tests, lint, export
+- refactor: cleanup
+- chore: dependencies update
+
+##### `1.0.0-alpha.3`
+- test: add missing tests
+- refactor: cleanup
+- chore: dependencies update and cleanup
+
+##### `1.0.0-alpha.0`
+- initial version
+
+install:
+```bash
+npm install @coreui/icons-react
+```
+
+import:
+```jsx
+import { CIcon, CIconRaw } from '@coreui/icons-react';
+import { cifAu } from '@coreui/icons';
+```
+```scss
+@import '~@coreui/icons/css/all.css';
+```
+
+usage:
+```jsx
+...
+class CoreUIIcons extends Component {
+...
+render() {
+ return (
+
+
+ )
+}
+...
+```
diff --git a/packages/icons-react/README.md b/packages/icons-react/README.md
new file mode 100644
index 000000000..5a2368d6f
--- /dev/null
+++ b/packages/icons-react/README.md
@@ -0,0 +1,91 @@
+
+
+ 
+
+
+
+
+ Official React.js component for CoreUI Icons and CoreUI Icons PRO.
+
+ Explore CoreUI Icons for React docs »
+
+
+ Report bug
+ ·
+ Request feature
+ ·
+ Community
+ ·
+ Blog
+
+
+
+## Status
+[![npm package][npm-badge]][npm]
+[![NPM downloads][npm-download]][npm]
+
+
+
+[npm-badge]: https://img.shields.io/npm/v/@coreui/icons-react/latest?style=flat-square
+[npm]: https://www.npmjs.com/package/@coreui/icons-react
+[npm-download]: https://img.shields.io/npm/dm/@coreui/icons-react.svg?style=flat-square
+
+## Installation
+
+```bash
+npm install @coreui/icons
+npm install @coreui/icons-react@next
+```
+
+or
+
+```bash
+yarn add @coreui/icons
+yarn add @coreui/icons-react@next
+```
+
+## Use
+
+### Single icon
+
+```jsx
+import { CIcon } from '@coreui/icons-react';
+import { cifAU } from '@coreui/icons';
+
+...
+render() {
+ return (
+
+ )
+}
+...
+```
+
+### All icons
+
+```jsx
+import { CIcon } from '@coreui/icons-react';
+import * as icon from '@coreui/icons';
+
+...
+render() {
+ return (
+
+ )
+}
+...
+```
+
+
+## API
+
+| property | type | description |
+| --- | --- | --- |
+| className | `string` | A string of all className you want applied to the component. |
+| customClassName | `string` \| `object` \| `string[]` | Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. |
+| icon | `string` \| `string[]` | Name of the icon placed in React object or SVG content. |
+| height | `number` | The height attribute defines the vertical length of an icon. |
+| size | `sm` \| `md` \|`lg` \| `xl` \| `xxl` \| `3xl` \| `4xl` \| `5xl` \| `6xl` \| `7xl` \| `8xl` \| `9xl` | Size of the icon. |
+| use | `string` | If defined component will be rendered using `use` tag. |
+| title | `string` | Title tag content. |
+| width | `number` | The width attribute defines the horizontal length of an icon. |
diff --git a/packages/icons-react/package.json b/packages/icons-react/package.json
new file mode 100644
index 000000000..f62796d67
--- /dev/null
+++ b/packages/icons-react/package.json
@@ -0,0 +1,95 @@
+{
+ "name": "@coreui/icons-react",
+ "description": "Official React component for CoreUI Icons",
+ "version": "2.0.0-rc.6",
+ "license": "MIT",
+ "homepage": "https://icons.coreui.io",
+ "author": {
+ "name": "CoreUI",
+ "url": "https://coreui.io",
+ "github": "https://github.com/coreui",
+ "twitter": "https://twitter.com/core_ui"
+ },
+ "contributors": [
+ {
+ "name": "CoreUI Team",
+ "url": "https://github.com/orgs/coreui/people"
+ }
+ ],
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/coreui/coreui-icons.git"
+ },
+ "bugs": {
+ "url": "https://github.com/coreui/coreui-icons/issues"
+ },
+ "main": "dist/index.js",
+ "module": "dist/index.es.js",
+ "jsnext:main": "dist/index.es.js",
+ "typings": "dist/index.d.ts",
+ "files": [
+ "dist/",
+ "README.md"
+ ],
+ "scripts": {
+ "build": "rollup -c",
+ "lint": "eslint \"src/**/*.{js,ts,tsx}\"",
+ "test": "jest --coverage",
+ "test:update": "jest --coverage --updateSnapshot"
+ },
+ "peerDependencies": {
+ "react": "^17"
+ },
+ "devDependencies": {
+ "@rollup/plugin-commonjs": "^21.0.0",
+ "@rollup/plugin-node-resolve": "^13.0.5",
+ "@rollup/plugin-typescript": "^8.3.0",
+ "@testing-library/jest-dom": "^5.14.1",
+ "@testing-library/react": "^12.1.2",
+ "@types/react": "^17.0.30",
+ "@types/react-dom": "^17.0.9",
+ "@typescript-eslint/eslint-plugin": "^5.0.0",
+ "@typescript-eslint/parser": "^5.0.0",
+ "classnames": "^2.3.1",
+ "eslint": "^7.32.0",
+ "eslint-config-prettier": "^8.3.0",
+ "eslint-plugin-prettier": "^4.0.0",
+ "eslint-plugin-react": "^7.26.1",
+ "eslint-plugin-react-hooks": "^4.2.0",
+ "jest": "^27.3.0",
+ "prettier": "^2.4.1",
+ "prop-types": "^15.7.2",
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2",
+ "rollup": "^2.56.2",
+ "rollup-plugin-import-css": "^3.0.2",
+ "rollup-plugin-peer-deps-external": "^2.2.4",
+ "ts-jest": "^27.0.7",
+ "typescript": "^4.4.4"
+ },
+ "keywords": [
+ "coreui",
+ "coreui-icons",
+ "coreui-react",
+ "icons",
+ "svg",
+ "svg-icons",
+ "layout",
+ "component",
+ "react"
+ ],
+ "jest": {
+ "moduleNameMapper": {
+ "\\.(css|scss)$": "/test/styleMock.js"
+ },
+ "preset": "ts-jest",
+ "testEnvironment": "jsdom",
+ "testPathIgnorePatterns": [
+ "dist/"
+ ],
+ "transform": {
+ ".*\\.(js)$": "ts-jest",
+ ".*\\.(tsx)$": "ts-jest"
+ }
+ }
+}
diff --git a/packages/icons-react/rollup.config.js b/packages/icons-react/rollup.config.js
new file mode 100644
index 000000000..bef526565
--- /dev/null
+++ b/packages/icons-react/rollup.config.js
@@ -0,0 +1,35 @@
+import commonjs from '@rollup/plugin-commonjs'
+import external from 'rollup-plugin-peer-deps-external'
+import resolve from '@rollup/plugin-node-resolve'
+import typescript from '@rollup/plugin-typescript'
+import css from 'rollup-plugin-import-css'
+import pkg from './package.json'
+export default {
+ input: 'src/index.ts',
+ output: [
+ {
+ file: pkg.main,
+ format: 'cjs',
+ exports: 'named',
+ sourcemap: true,
+ },
+ {
+ file: pkg.module,
+ format: 'es',
+ exports: 'named',
+ sourcemap: true,
+ },
+ ],
+ plugins: [
+ css(),
+ external(),
+ resolve(),
+ typescript({
+ exclude: ['**/__tests__/**'],
+ tsconfig: './tsconfig.json',
+ }),
+ commonjs({
+ include: ['../../node_modules/**'],
+ }),
+ ],
+}
diff --git a/packages/icons-react/src/CIcon.css b/packages/icons-react/src/CIcon.css
new file mode 100644
index 000000000..1ce713d7e
--- /dev/null
+++ b/packages/icons-react/src/CIcon.css
@@ -0,0 +1,78 @@
+.icon {
+ display: inline-block;
+ color: inherit;
+ text-align: center;
+ fill: currentColor;
+}
+
+.icon:not(.icon-c-s):not(.icon-custom-size) {
+ width: 1rem;
+ height: 1rem;
+ font-size: 1rem;
+}
+
+.icon:not(.icon-c-s):not(.icon-custom-size).icon-xxl {
+ width: 2rem;
+ height: 2rem;
+ font-size: 2rem;
+}
+
+.icon:not(.icon-c-s):not(.icon-custom-size).icon-3xl {
+ width: 3rem;
+ height: 3rem;
+ font-size: 3rem;
+}
+
+.icon:not(.icon-c-s):not(.icon-custom-size).icon-4xl {
+ width: 4rem;
+ height: 4rem;
+ font-size: 4rem;
+}
+
+.icon:not(.icon-c-s):not(.icon-custom-size).icon-5xl {
+ width: 5rem;
+ height: 5rem;
+ font-size: 5rem;
+}
+
+.icon:not(.icon-c-s):not(.icon-custom-size).icon-6xl {
+ width: 6rem;
+ height: 6rem;
+ font-size: 6rem;
+}
+
+.icon:not(.icon-c-s):not(.icon-custom-size).icon-7xl {
+ width: 7rem;
+ height: 7rem;
+ font-size: 7rem;
+}
+
+.icon:not(.icon-c-s):not(.icon-custom-size).icon-8xl {
+ width: 8rem;
+ height: 8rem;
+ font-size: 8rem;
+}
+
+.icon:not(.icon-c-s):not(.icon-custom-size).icon-9xl {
+ width: 9rem;
+ height: 9rem;
+ font-size: 9rem;
+}
+
+.icon:not(.icon-c-s):not(.icon-custom-size).icon-xl {
+ width: 1.5rem;
+ height: 1.5rem;
+ font-size: 1.5rem;
+}
+
+.icon:not(.icon-c-s):not(.icon-custom-size).icon-lg {
+ width: 1.25rem;
+ height: 1.25rem;
+ font-size: 1.25rem;
+}
+
+.icon:not(.icon-c-s):not(.icon-custom-size).icon-sm {
+ width: 0.875rem;
+ height: 0.875rem;
+ font-size: 0.875rem;
+}
\ No newline at end of file
diff --git a/packages/icons-react/src/CIcon.tsx b/packages/icons-react/src/CIcon.tsx
new file mode 100644
index 000000000..6f9010cfc
--- /dev/null
+++ b/packages/icons-react/src/CIcon.tsx
@@ -0,0 +1,198 @@
+import PropTypes from 'prop-types'
+import React, { HTMLAttributes, forwardRef, useState, useMemo } from 'react'
+import classNames from 'classnames'
+import './CIcon.css'
+
+export interface CIconProps extends HTMLAttributes {
+ /**
+ * A string of all className you want applied to the component.
+ */
+ className?: string
+ /**
+ * Use `icon={...}` instead of
+ *
+ * @deprecated since version 3.0
+ */
+ content?: string | string[]
+ /**
+ * Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.
+ */
+ customClassName?: string | object | string[] // eslint-disable-line @typescript-eslint/ban-types
+ /**
+ * Name of the icon placed in React object or SVG content.
+ */
+ icon?: string | string[]
+ /**
+ * The height attribute defines the vertical length of an icon.
+ */
+ height?: number
+ /**
+ * Use `icon="..."` instead of
+ *
+ * @deprecated since version 3.0
+ */
+ name?: string
+ /**
+ * Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.
+ */
+ size?:
+ | 'custom'
+ | 'custom-size'
+ | 'sm'
+ | 'lg'
+ | 'xl'
+ | 'xxl'
+ | '3xl'
+ | '4xl'
+ | '5xl'
+ | '6xl'
+ | '7xl'
+ | '8xl'
+ | '9xl'
+ /**
+ * If defined component will be rendered using 'use' tag.
+ */
+ use?: string
+ /**
+ * Title tag content.
+ */
+ title?: string
+ /**
+ * The width attribute defines the horizontal length of an icon.
+ */
+ width?: number
+}
+
+const toCamelCase = (str: string) => {
+ return str
+ .replace(/([-_][a-z0-9])/gi, ($1) => {
+ return $1.toUpperCase()
+ })
+ .replace(/-/gi, '')
+}
+
+export const CIcon = forwardRef(
+ (
+ { className, content, customClassName, height, icon, name, size, title, use, width, ...rest },
+ ref,
+ ) => {
+ const [change, setChange] = useState(0)
+ const _icon = icon || content || name
+
+ if (content) {
+ process &&
+ process.env &&
+ process.env.NODE_ENV === 'development' &&
+ console.warn(
+ '[CIcon] The `content` property is deprecated and will be removed in v3, please use `icon={...}` instead of.',
+ )
+ }
+ if (name) {
+ process &&
+ process.env &&
+ process.env.NODE_ENV === 'development' &&
+ console.warn(
+ '[CIcon] The `name` property is deprecated and will be removed in v3, please use `icon="..."` instead of.',
+ )
+ }
+
+ useMemo(() => setChange(change + 1), [_icon, JSON.stringify(_icon)])
+
+ const iconName = useMemo(
+ () =>
+ _icon && typeof _icon === 'string' && _icon.includes('-') ? toCamelCase(_icon) : _icon,
+ [change],
+ )
+
+ const titleCode = title ? `${title}` : ''
+
+ const code = useMemo(() => {
+ if (Array.isArray(_icon)) {
+ return _icon
+ }
+ if (typeof _icon === 'string' && React['icons']) {
+ return React['icons'][iconName]
+ }
+ }, [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 rest['viewBox'] || `0 0 ${scale}`
+ })()
+
+ // render
+
+ const _className = customClassName
+ ? classNames(customClassName)
+ : classNames(
+ 'icon',
+ {
+ [`icon-${size}`]: size,
+ [`icon-custom-size`]: height || width,
+ },
+ className,
+ )
+
+ return use ? (
+
+ ) : (
+
+ )
+ },
+)
+
+CIcon.propTypes = {
+ className: PropTypes.string,
+ content: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+ customClassName: PropTypes.string,
+ height: PropTypes.number,
+ icon: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+ name: PropTypes.string,
+ size: PropTypes.oneOf([
+ 'custom',
+ 'custom-size',
+ 'sm',
+ 'lg',
+ 'xl',
+ 'xxl',
+ '3xl',
+ '4xl',
+ '5xl',
+ '6xl',
+ '7xl',
+ '8xl',
+ '9xl',
+ ]),
+ title: PropTypes.any,
+ use: PropTypes.any,
+ width: PropTypes.number,
+}
+
+CIcon.displayName = 'CIcon'
diff --git a/packages/icons-react/src/__tests__/CIcon.spec.tsx b/packages/icons-react/src/__tests__/CIcon.spec.tsx
new file mode 100644
index 000000000..286eafca3
--- /dev/null
+++ b/packages/icons-react/src/__tests__/CIcon.spec.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import CIcon from './../'
+
+// import { cifAu } from './../../../icons/js/flag/cif-au'
+
+describe('CIcon', () => {
+
+ it('renders svg with class="icon"', () => {
+ const { container } = render()
+ expect(container.firstChild).toHaveClass('icon')
+ })
+
+ // it('renders svg with icon', () => {
+ // const { container } = render()
+ // expect(container.firstChild).toContain(cifAu[1])
+ // // expect(render()).toContain(cifAu)
+ // })
+
+ it('renders svg with size', () => {
+ const { container } = render()
+ expect(container.firstChild).toHaveClass('icon-xl')
+ })
+
+ it('renders svg with custom size', () => {
+ const { container } = render()
+ expect(container.firstChild).toHaveClass('icon-custom-size')
+ })
+
+ it('renders svg with className', () => {
+ const { container } = render()
+ expect(container.firstChild).toHaveClass('icon-test')
+ })
+
+ // it('renders