mirror of
https://github.com/coreui/coreui-icons.git
synced 2025-08-09 18:26:28 +02:00
release: @coreui/icons-react v2.0.0-rc.6
This commit is contained in:
Łukasz Holeczek
3
packages/icons-react/.eslintignore
Normal file
3
packages/icons-react/.eslintignore
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"ignorePatterns": [".eslintrc.js"]
|
||||||
|
}
|
||||||
37
packages/icons-react/.eslintrc.js
Normal file
37
packages/icons-react/.eslintrc.js
Normal file
@@ -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',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
1
packages/icons-react/.prettierignore
Normal file
1
packages/icons-react/.prettierignore
Normal file
@@ -0,0 +1 @@
|
|||||||
|
dist/
|
||||||
7
packages/icons-react/.prettierrc.js
Normal file
7
packages/icons-react/.prettierrc.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
module.exports = {
|
||||||
|
semi: false,
|
||||||
|
trailingComma: "all",
|
||||||
|
singleQuote: true,
|
||||||
|
printWidth: 100,
|
||||||
|
tabWidth: 2
|
||||||
|
};
|
||||||
49
packages/icons-react/CHANGELOG.md
Normal file
49
packages/icons-react/CHANGELOG.md
Normal file
@@ -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 (
|
||||||
|
<CIconRaw name='cifAu' size="2xl"/>
|
||||||
|
<CIcon name="cil-list" size="2xl"/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
...
|
||||||
|
```
|
||||||
91
packages/icons-react/README.md
Normal file
91
packages/icons-react/README.md
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
<p align="center">
|
||||||
|
<a href="https://coreui.io/">
|
||||||
|
<img src="https://coreui.io/images/brand/coreui-icons.svg" alt="CoreUI Icons logo" height="50">
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
Official React.js component for CoreUI Icons and CoreUI Icons PRO.
|
||||||
|
<br>
|
||||||
|
<a href="https://coreui.io/react/docs/components/icon/"><strong>Explore CoreUI Icons for React docs »</strong></a>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<a href="https://github.com/coreui/coreui-icons/issues/new?template=bug_report.md">Report bug</a>
|
||||||
|
·
|
||||||
|
<a href="https://github.com/coreui/coreui-icons/issues/new?template=feature_request.md">Request feature</a>
|
||||||
|
·
|
||||||
|
<a href="https://community.coreui.io/">Community</a>
|
||||||
|
·
|
||||||
|
<a href="https://blog.coreui.io/">Blog</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
## 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 (
|
||||||
|
<CIcon icon={cilList} size="xxl"/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
...
|
||||||
|
```
|
||||||
|
|
||||||
|
### All icons
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { CIcon } from '@coreui/icons-react';
|
||||||
|
import * as icon from '@coreui/icons';
|
||||||
|
|
||||||
|
...
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<CIcon icon={icon.cilList} size="xxl"/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
...
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## 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. |
|
||||||
95
packages/icons-react/package.json
Normal file
95
packages/icons-react/package.json
Normal file
@@ -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)$": "<rootDir>/test/styleMock.js"
|
||||||
|
},
|
||||||
|
"preset": "ts-jest",
|
||||||
|
"testEnvironment": "jsdom",
|
||||||
|
"testPathIgnorePatterns": [
|
||||||
|
"dist/"
|
||||||
|
],
|
||||||
|
"transform": {
|
||||||
|
".*\\.(js)$": "ts-jest",
|
||||||
|
".*\\.(tsx)$": "ts-jest"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
35
packages/icons-react/rollup.config.js
Normal file
35
packages/icons-react/rollup.config.js
Normal file
@@ -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/**'],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
}
|
||||||
78
packages/icons-react/src/CIcon.css
Normal file
78
packages/icons-react/src/CIcon.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
198
packages/icons-react/src/CIcon.tsx
Normal file
198
packages/icons-react/src/CIcon.tsx
Normal file
@@ -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<SVGSVGElement> {
|
||||||
|
/**
|
||||||
|
* 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<SVGSVGElement, CIconProps>(
|
||||||
|
(
|
||||||
|
{ 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>${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 ? (
|
||||||
|
<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}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
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'
|
||||||
40
packages/icons-react/src/__tests__/CIcon.spec.tsx
Normal file
40
packages/icons-react/src/__tests__/CIcon.spec.tsx
Normal file
@@ -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(<CIcon />)
|
||||||
|
expect(container.firstChild).toHaveClass('icon')
|
||||||
|
})
|
||||||
|
|
||||||
|
// it('renders svg with icon', () => {
|
||||||
|
// const { container } = render(<CIcon icon={cifAu} />)
|
||||||
|
// expect(container.firstChild).toContain(cifAu[1])
|
||||||
|
// // expect(render()).toContain(cifAu)
|
||||||
|
// })
|
||||||
|
|
||||||
|
it('renders svg with size', () => {
|
||||||
|
const { container } = render(<CIcon size="xl"/>)
|
||||||
|
expect(container.firstChild).toHaveClass('icon-xl')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('renders svg with custom size', () => {
|
||||||
|
const { container } = render(<CIcon height={20} />)
|
||||||
|
expect(container.firstChild).toHaveClass('icon-custom-size')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('renders svg with className', () => {
|
||||||
|
const { container } = render(<CIcon className="icon-test" />)
|
||||||
|
expect(container.firstChild).toHaveClass('icon-test')
|
||||||
|
})
|
||||||
|
|
||||||
|
// it('renders <svg> with <use>', () => {
|
||||||
|
// const { container } = render(<CIcon use="xxx" />)
|
||||||
|
// expect(container.firstChild?.firstChild).toContain('<use href="xxx" />')
|
||||||
|
// })
|
||||||
|
})
|
||||||
3
packages/icons-react/src/index.ts
Normal file
3
packages/icons-react/src/index.ts
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import { CIcon } from './CIcon'
|
||||||
|
|
||||||
|
export default CIcon
|
||||||
5
packages/icons-react/tests/.eslintrc
Normal file
5
packages/icons-react/tests/.eslintrc
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"env": {
|
||||||
|
"mocha": true
|
||||||
|
}
|
||||||
|
}
|
||||||
1
packages/icons-react/tests/cif-AU.js
Normal file
1
packages/icons-react/tests/cif-AU.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export const cifAU = ["301 151","<defs><path id='a' d='M.5.5h150v75H.5z'/><path id='c' d='M.5.5V38h175v37.5h-25L.5.5zm150 0h-75V88H.5V75.5l150-75z'/></defs><g fill='none' fill-rule='evenodd'><path fill='#00008B' fill-rule='nonzero' d='M.5.5h300v150H.5z'/><mask id='b' fill='#fff'><use xlink:href='#a'/></mask><path fill='#000' fill-rule='nonzero' stroke='#FFF' stroke-width='17.578' d='M.5.5l150 75m0-75l-150 75' mask='url(#b)'/><mask id='d' fill='#fff'><use xlink:href='#c'/></mask><path fill='#000' fill-rule='nonzero' stroke='red' stroke-width='9.375' d='M.5.5l150 75m0-75l-150 75' mask='url(#d)'/><path fill='#000' fill-rule='nonzero' stroke='#FFF' stroke-width='23.438' d='M75.5.5V88M.5 38h175'/><path fill='#000' fill-rule='nonzero' stroke='red' stroke-width='14.063' d='M75.5.5v80.273M.5 38h155.273'/><path fill='#00008B' fill-rule='nonzero' d='M.5 75.5h150V.5h50v100H.5z'/><path fill='#FFF' fill-rule='nonzero' d='M75.5 90.5l4.339 13.491 13.252-5.019-7.842 11.803 12.187 7.232-14.118 1.228 1.944 14.037L75.5 123l-9.762 10.272 1.944-14.037-14.118-1.228 12.187-7.232-7.842-11.803 13.252 5.019zM225.5 114.785l2.066 6.424 6.311-2.39-3.734 5.621 5.803 3.444-6.722.585.926 6.684-4.649-4.891-4.649 4.891.926-6.684-6.722-.585 5.803-3.444-3.734-5.621 6.31 2.39zM188 55.411l2.066 6.424 6.311-2.39-3.734 5.621 5.803 3.444-6.722.585.926 6.684-4.65-4.892-4.649 4.891.926-6.684-6.723-.585 5.803-3.444-3.734-5.621 6.311 2.39zM225.5 14.786l2.066 6.424 6.311-2.39-3.734 5.62 5.803 3.444-6.722.585.926 6.684-4.649-4.891-4.649 4.891.926-6.684-6.722-.585 5.803-3.444-3.734-5.62 6.31 2.39zM258.833 45.411l2.066 6.424 6.311-2.39-3.734 5.621 5.803 3.444-6.723.585.926 6.684-4.649-4.891-4.649 4.891.926-6.684-6.723-.585 5.803-3.444-3.734-5.621 6.311 2.39zM240.5 75.5l1.633 4.003 4.311.316-3.302 2.79 1.032 4.198-3.674-2.279-3.674 2.279 1.032-4.198-3.302-2.79 4.311-.316z'/></g>"]
|
||||||
28
packages/icons-react/tests/logo.js
Normal file
28
packages/icons-react/tests/logo.js
Normal file
File diff suppressed because one or more lines are too long
25
packages/icons-react/tsconfig.json
Normal file
25
packages/icons-react/tsconfig.json
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"jsx": "react",
|
||||||
|
"outDir": "dist",
|
||||||
|
"module": "esnext",
|
||||||
|
"target": "es5",
|
||||||
|
"lib": ["es6", "dom", "es2016", "es2017"],
|
||||||
|
"sourceMap": true,
|
||||||
|
"allowJs": true,
|
||||||
|
"declaration": true,
|
||||||
|
"declarationDir": ".",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"noImplicitReturns": true,
|
||||||
|
"noImplicitThis": true,
|
||||||
|
"noImplicitAny": true,
|
||||||
|
"strictNullChecks": true,
|
||||||
|
"suppressImplicitAnyIndexErrors": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"esModuleInterop": true
|
||||||
|
},
|
||||||
|
"include": ["src"],
|
||||||
|
"exclude": ["**/node_modules", "dist"]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user