diff --git a/LICENSE b/LICENSE index 0a55701..f4470fa 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2023 creativeLabs Łukasz Holeczek +Copyright (c) 2024 creativeLabs Łukasz Holeczek Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/package.json b/package.json index b999f06..ce7e643 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/icons-react", - "version": "2.2.0", + "version": "2.3.0", "description": "Official React component for CoreUI Icons", "keywords": [ "coreui", @@ -13,47 +13,47 @@ "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)", "main": "dist/index.js", - "module": "dist/index.es.js", - "jsnext:main": "dist/index.es.js", + "module": "dist/index.esm.js", + "jsnext:main": "dist/index.esm.js", "types": "dist/index.d.ts", "files": [ "dist/", "src/" ], "scripts": { - "build": "rollup -c --bundleConfigAsCjs", + "build": "rollup --config", "test": "jest --coverage", "test:update": "jest --coverage --updateSnapshot" }, "devDependencies": { - "@rollup/plugin-commonjs": "^25.0.2", - "@rollup/plugin-node-resolve": "^15.1.0", - "@rollup/plugin-typescript": "^11.1.2", - "@testing-library/jest-dom": "^5.16.5", - "@testing-library/react": "^14.0.0", - "@types/react": "^18.2.14", - "@types/react-dom": "^18.2.6", - "classnames": "^2.3.2", - "jest": "^29.6.1", - "jest-environment-jsdom": "^29.6.1", + "@rollup/plugin-commonjs": "^26.0.1", + "@rollup/plugin-node-resolve": "^15.2.3", + "@rollup/plugin-typescript": "^11.1.6", + "@testing-library/jest-dom": "^6.4.6", + "@testing-library/react": "^16.0.0", + "@types/react": "^18.3.3", + "@types/react-dom": "^18.3.0", + "classnames": "^2.5.1", + "jest": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", "prop-types": "^15.8.1", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "rollup": "^3.26.2", - "rollup-plugin-import-css": "^3.3.1", - "ts-jest": "^29.1.1", - "typescript": "^5.1.6" + "react": "^18.3.1", + "react-dom": "^18.3.1", + "rollup": "^4.18.1", + "rollup-plugin-import-css": "^3.5.0", + "ts-jest": "^29.2.2", + "typescript": "^5.5.3" }, "peerDependencies": { "react": ">=17", diff --git a/rollup.config.js b/rollup.config.mjs similarity index 100% rename from rollup.config.js rename to rollup.config.mjs diff --git a/src/CIcon.tsx b/src/CIcon.tsx index 138e52d..166f941 100644 --- a/src/CIcon.tsx +++ b/src/CIcon.tsx @@ -53,6 +53,10 @@ export interface CIconProps extends Omit, 'content * If defined component will be rendered using 'use' tag. */ use?: string + /** + * The viewBox attribute defines the position and dimension of an SVG viewport. + */ + viewBox?: string /** * Title tag content. */ @@ -108,8 +112,8 @@ export const CIcon = forwardRef( return _icon } - if (typeof _icon === 'string' && React['icons']) { - return React['icons'][iconName as string] + if (typeof _icon === 'string' && (React as { [key: string]: any })['icons']) { + return (React as { [key: string]: any })[iconName as string] } }, [change]) @@ -193,8 +197,9 @@ CIcon.propTypes = { '8xl', '9xl', ]), - title: PropTypes.any, - use: PropTypes.any, + title: PropTypes.string, + use: PropTypes.string, + viewBox: PropTypes.string, width: PropTypes.number, } diff --git a/src/CIconSvg.tsx b/src/CIconSvg.tsx new file mode 100644 index 0000000..b404ca7 --- /dev/null +++ b/src/CIconSvg.tsx @@ -0,0 +1,104 @@ +import React, { Children, HTMLAttributes, forwardRef } from 'react' +import PropTypes from 'prop-types' +import classNames from 'classnames' +import './CIcon.css' + +export interface CIconSvgProps extends Omit, 'content'> { + /** + * A string of all className you want applied to the component. + */ + className?: string + /** + * Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. + */ + customClassName?: string | string[] + /** + * The height attribute defines the vertical length of an icon. + */ + height?: number + /** + * 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' + /** + * Title tag content. + */ + title?: string + /** + * The width attribute defines the horizontal length of an icon. + */ + width?: number +} + +export const CIconSvg = forwardRef( + ({ children, className, customClassName, height, size, title, width, ...rest }, ref) => { + const _className = customClassName + ? classNames(customClassName) + : classNames( + 'icon', + { + [`icon-${size}`]: size, + [`icon-custom-size`]: height || width, + }, + className, + ) + + return ( + <> + {Children.map(children, (child) => { + if (React.isValidElement(child)) { + return React.cloneElement(child as React.ReactElement, { + 'aria-hidden': true, + className: _className, + focusable: 'false', + ref: ref, + role: 'img', + ...rest, + }) + } + + return + })} + {title && {title}} + + ) + }, +) + +CIconSvg.propTypes = { + className: PropTypes.string, + customClassName: PropTypes.string, + height: PropTypes.number, + size: PropTypes.oneOf([ + 'custom', + 'custom-size', + 'sm', + 'lg', + 'xl', + 'xxl', + '3xl', + '4xl', + '5xl', + '6xl', + '7xl', + '8xl', + '9xl', + ]), + title: PropTypes.string, + width: PropTypes.number, +} + +CIconSvg.displayName = 'CIconSvg' diff --git a/src/__tests__/CIcon.spec.tsx b/src/__tests__/CIcon.spec.tsx index 6f590c7..566d127 100644 --- a/src/__tests__/CIcon.spec.tsx +++ b/src/__tests__/CIcon.spec.tsx @@ -1,6 +1,6 @@ import React from 'react' import { render } from '@testing-library/react' -import '@testing-library/jest-dom/extend-expect' +import '@testing-library/jest-dom' import CIcon from './../' describe('CIcon', () => { diff --git a/src/index.ts b/src/index.ts index 5ebb4bc..13835ba 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,5 @@ import { CIcon } from './CIcon' +import { CIconSvg } from './CIconSvg' +export { CIcon, CIconSvg } export default CIcon diff --git a/tsconfig.json b/tsconfig.json index ed928e2..7f4d467 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,7 +15,6 @@ "noImplicitThis": true, "noImplicitAny": true, "strictNullChecks": true, - "suppressImplicitAnyIndexErrors": true, "noUnusedLocals": true, "noUnusedParameters": true, "esModuleInterop": true