mirror of
https://github.com/coreui/coreui-icons.git
synced 2025-08-09 10:16:29 +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