Skip to content

Commit b43e875

Browse files
mrholekmrholek
committed
refactor: add icon component
1 parent a3af1a8 commit b43e875

File tree

12 files changed

+567
-0
lines changed

12 files changed

+567
-0
lines changed

‎packages/coreui-icons-react/CHANGELOG.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
### [@coreui/icons-react](https://coreui.io/) changelog
2+
3+
##### `1.1.0`
4+
- chore: update to React 17
5+
6+
##### `1.0.0` - `1.0.3`
7+
- refactor: improve 'unregistered icon' error message
8+
- fix: change 'replaceAll' func to 'replace' due to transpilation error
9+
- test: more coverage
10+
- fix: typings
11+
- fix: tests, lint, export
12+
- refactor: cleanup
13+
- chore: dependencies update
14+
15+
##### `1.0.0-alpha.3`
16+
- test: add missing tests
17+
- refactor: cleanup
18+
- chore: dependencies update and cleanup
19+
20+
##### `1.0.0-alpha.0`
21+
- initial version
22+
23+
install:
24+
```bash
25+
npm install @coreui/icons-react
26+
```
27+
28+
import:
29+
```jsx
30+
import { CIcon, CIconRaw } from '@coreui/icons-react';
31+
import { cifAu } from '@coreui/icons';
32+
```
33+
```scss
34+
@import '~@coreui/icons/css/all.css';
35+
```
36+
37+
usage:
38+
```jsx
39+
...
40+
class CoreUIIcons extends Component {
41+
...
42+
render() {
43+
return (
44+
<CIconRaw name='cifAu' size="2xl"/>
45+
<CIcon name="cil-list" size="2xl"/>
46+
)
47+
}
48+
...
49+
```

‎packages/coreui-icons-react/LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2021 creativeLabs Łukasz Holeczek
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎packages/coreui-icons-react/README.md

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<p align="center">
2+
<a href="https://coreui.io/">
3+
<img src="https://coreui.io/images/brand/coreui-icons.svg" alt="CoreUI Icons logo" height="50">
4+
</a>
5+
</p>
6+
7+
<p align="center">
8+
Official React.js component for CoreUI Icons and CoreUI Icons PRO.
9+
<br>
10+
<a href="https://coreui.io/react/docs/components/icon/"><strong>Explore CoreUI Icons for React docs »</strong></a>
11+
<br>
12+
<br>
13+
<a href="https://github.com/coreui/coreui-icons/issues/new?template=bug_report.md">Report bug</a>
14+
·
15+
<a href="https://github.com/coreui/coreui-icons/issues/new?template=feature_request.md">Request feature</a>
16+
·
17+
<a href="https://blog.coreui.io/">Blog</a>
18+
</p>
19+
20+
21+
## Status
22+
[![npm package][npm-badge]][npm]
23+
[![NPM downloads][npm-download]][npm]
24+
![react](https://img.shields.io/badge/react-^17.0.2-lightgrey.svg?style=flat-square&logo=react)
25+
26+
27+
[npm-badge]: https://img.shields.io/npm/v/@coreui/icons-react/latest?style=flat-square
28+
[npm]: https://www.npmjs.com/package/@coreui/icons-react
29+
[npm-download]: https://img.shields.io/npm/dm/@coreui/icons-react.svg?style=flat-square
30+
31+
## Installation
32+
33+
```bash
34+
npm install @coreui/icons
35+
npm install @coreui/icons-react
36+
```
37+
38+
or
39+
40+
```bash
41+
yarn add @coreui/icons
42+
yarn add @coreui/icons-react
43+
```
44+
45+
## Use
46+
47+
### Single icon
48+
49+
```jsx
50+
import { CIcon } from '@coreui/icons-react';
51+
import { cifAU } from '@coreui/icons';
52+
53+
...
54+
render() {
55+
return (
56+
<CIcon icon={cilList} size="xxl"/>
57+
)
58+
}
59+
...
60+
```
61+
62+
### All icons
63+
64+
```jsx
65+
import { CIcon } from '@coreui/icons-react';
66+
import * as icon from '@coreui/icons';
67+
68+
...
69+
render() {
70+
return (
71+
<CIcon icon={icon.cilList} size="xxl"/>
72+
)
73+
}
74+
...
75+
```
76+
77+
78+
## API
79+
80+
| property | type | description |
81+
| --- | --- | --- |
82+
| className | `string` | A string of all className you want applied to the component. |
83+
| customClassName | `string` \| `object` \| `string[]` | Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. |
84+
| icon | `string` \| `string[]` | Name of the icon placed in React object or SVG content. |
85+
| height | `number` | The height attribute defines the vertical length of an icon. |
86+
| size | `sm` \| `md` \|`lg` \| `xl` \| `xxl` \| `3xl` \| `4xl` \| `5xl` \| `6xl` \| `7xl` \| `8xl` \| `9xl` | Size of the icon. |
87+
| use | `string` | If defined component will be rendered using `use` tag. |
88+
| title | `string` | Title tag content. |
89+
| width | `number` | The width attribute defines the horizontal length of an icon. |

‎packages/coreui-icons-react/jest.config.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/**
2+
* Copyright (c) 2013-present, creativeLabs Lukasz Holeczek.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
'use strict'
9+
10+
module.exports = {
11+
moduleNameMapper: {
12+
'\\.(css|scss)$': '<rootDir>/test/styleMock.js',
13+
},
14+
preset: 'ts-jest',
15+
testEnvironment: 'jsdom',
16+
testPathIgnorePatterns: ['dist/'],
17+
transform: {
18+
'.*\\.(js)$': 'ts-jest',
19+
'.*\\.(tsx)$': 'ts-jest',
20+
},
21+
}

‎packages/coreui-icons-react/package.json

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
{
2+
"name": "@coreui/icons-react",
3+
"version": "2.0.0",
4+
"description": "Official React component for CoreUI Icons",
5+
"keywords": [
6+
"coreui",
7+
"coreui-icons",
8+
"coreui-react",
9+
"icons",
10+
"svg",
11+
"svg-icons",
12+
"layout",
13+
"component",
14+
"react"
15+
],
16+
"homepage": "https://icons.coreui.io",
17+
"bugs": {
18+
"url": "https://github.com/coreui/coreui-icons/issues"
19+
},
20+
"repository": {
21+
"type": "git",
22+
"url": "https://github.com/coreui/coreui-icons.git"
23+
},
24+
"license": "MIT",
25+
"author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
26+
"main": "dist/index.js",
27+
"module": "dist/index.es.js",
28+
"jsnext:main": "dist/index.es.js",
29+
"types": "dist/index.d.ts",
30+
"files": [
31+
"dist/",
32+
"src/"
33+
],
34+
"scripts": {
35+
"build": "rollup -c"
36+
},
37+
"devDependencies": {
38+
"@rollup/plugin-commonjs": "^21.0.1",
39+
"@rollup/plugin-node-resolve": "^13.1.1",
40+
"@rollup/plugin-typescript": "^8.3.0",
41+
"@testing-library/jest-dom": "^5.16.1",
42+
"@testing-library/react": "^12.1.2",
43+
"@types/react": "^17.0.37",
44+
"@types/react-dom": "^17.0.11",
45+
"classnames": "^2.3.1",
46+
"prop-types": "^15.7.2",
47+
"react": "^17.0.2",
48+
"react-dom": "^17.0.2",
49+
"rollup": "^2.61.1",
50+
"rollup-plugin-import-css": "^3.0.2",
51+
"rollup-plugin-peer-deps-external": "^2.2.4",
52+
"typescript": "^4.5.4"
53+
},
54+
"peerDependencies": {
55+
"react": "^17",
56+
"react-dom": "^17"
57+
}
58+
}

‎packages/coreui-icons-react/src/CIcon.css

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
.icon {
2+
display: inline-block;
3+
color: inherit;
4+
text-align: center;
5+
fill: currentColor;
6+
}
7+
8+
.icon:not(.icon-c-s):not(.icon-custom-size) {
9+
width: 1rem;
10+
height: 1rem;
11+
font-size: 1rem;
12+
}
13+
14+
.icon:not(.icon-c-s):not(.icon-custom-size).icon-xxl {
15+
width: 2rem;
16+
height: 2rem;
17+
font-size: 2rem;
18+
}
19+
20+
.icon:not(.icon-c-s):not(.icon-custom-size).icon-3xl {
21+
width: 3rem;
22+
height: 3rem;
23+
font-size: 3rem;
24+
}
25+
26+
.icon:not(.icon-c-s):not(.icon-custom-size).icon-4xl {
27+
width: 4rem;
28+
height: 4rem;
29+
font-size: 4rem;
30+
}
31+
32+
.icon:not(.icon-c-s):not(.icon-custom-size).icon-5xl {
33+
width: 5rem;
34+
height: 5rem;
35+
font-size: 5rem;
36+
}
37+
38+
.icon:not(.icon-c-s):not(.icon-custom-size).icon-6xl {
39+
width: 6rem;
40+
height: 6rem;
41+
font-size: 6rem;
42+
}
43+
44+
.icon:not(.icon-c-s):not(.icon-custom-size).icon-7xl {
45+
width: 7rem;
46+
height: 7rem;
47+
font-size: 7rem;
48+
}
49+
50+
.icon:not(.icon-c-s):not(.icon-custom-size).icon-8xl {
51+
width: 8rem;
52+
height: 8rem;
53+
font-size: 8rem;
54+
}
55+
56+
.icon:not(.icon-c-s):not(.icon-custom-size).icon-9xl {
57+
width: 9rem;
58+
height: 9rem;
59+
font-size: 9rem;
60+
}
61+
62+
.icon:not(.icon-c-s):not(.icon-custom-size).icon-xl {
63+
width: 1.5rem;
64+
height: 1.5rem;
65+
font-size: 1.5rem;
66+
}
67+
68+
.icon:not(.icon-c-s):not(.icon-custom-size).icon-lg {
69+
width: 1.25rem;
70+
height: 1.25rem;
71+
font-size: 1.25rem;
72+
}
73+
74+
.icon:not(.icon-c-s):not(.icon-custom-size).icon-sm {
75+
width: 0.875rem;
76+
height: 0.875rem;
77+
font-size: 0.875rem;
78+
}

0 commit comments

Comments
 (0)