mirror of
https://github.com/iconify/iconify.git
synced 2024-09-19 16:59:02 +00:00
Rebuild React without API package
This commit is contained in:
Vjacheslav Trushkin
parent
6b49e93823
commit
257d3d60f0
3
packages/react/.babelrc
Normal file
3
packages/react/.babelrc
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"presets": ["@babel/preset-env", "@babel/preset-react"]
|
||||
}
|
||||
4
packages/react/.gitignore
vendored
Normal file
4
packages/react/.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
dist
|
||||
lib
|
||||
8
packages/react/.npmignore
Normal file
8
packages/react/.npmignore
Normal file
@ -0,0 +1,8 @@
|
||||
.DS_Store
|
||||
api-extractor.json
|
||||
rollup.config.js
|
||||
tsconfig.json
|
||||
build.js
|
||||
node_modules
|
||||
src
|
||||
tests
|
||||
43
packages/react/api-extractor.json
Normal file
43
packages/react/api-extractor.json
Normal file
@ -0,0 +1,43 @@
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
|
||||
"mainEntryPointFilePath": "lib/offline.d.ts",
|
||||
"bundledPackages": [
|
||||
"@iconify/types",
|
||||
"@iconify/core",
|
||||
"@cyberalien/redundancy"
|
||||
],
|
||||
"compiler": {},
|
||||
"apiReport": {
|
||||
"enabled": false
|
||||
},
|
||||
"docModel": {
|
||||
"enabled": false
|
||||
},
|
||||
"dtsRollup": {
|
||||
"enabled": true,
|
||||
"untrimmedFilePath": "<projectFolder>/dist/offline.d.ts"
|
||||
},
|
||||
"tsdocMetadata": {
|
||||
"enabled": false
|
||||
},
|
||||
"messages": {
|
||||
"compilerMessageReporting": {
|
||||
"default": {
|
||||
"logLevel": "warning"
|
||||
}
|
||||
},
|
||||
"extractorMessageReporting": {
|
||||
"default": {
|
||||
"logLevel": "warning"
|
||||
},
|
||||
"ae-missing-release-tag": {
|
||||
"logLevel": "none"
|
||||
}
|
||||
},
|
||||
"tsdocMessageReporting": {
|
||||
"default": {
|
||||
"logLevel": "warning"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
114
packages/react/build.js
Normal file
114
packages/react/build.js
Normal file
@ -0,0 +1,114 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const child_process = require('child_process');
|
||||
|
||||
const packagesDir = path.dirname(__dirname);
|
||||
|
||||
// List of commands to run
|
||||
const commands = [];
|
||||
|
||||
// Parse command line
|
||||
const compile = {
|
||||
core: false,
|
||||
lib: true,
|
||||
dist: true,
|
||||
api: true,
|
||||
};
|
||||
process.argv.slice(2).forEach((cmd) => {
|
||||
if (cmd.slice(0, 2) !== '--') {
|
||||
return;
|
||||
}
|
||||
const parts = cmd.slice(2).split('-');
|
||||
if (parts.length === 2) {
|
||||
// Parse 2 part commands like --with-lib
|
||||
const key = parts.pop();
|
||||
if (compile[key] === void 0) {
|
||||
return;
|
||||
}
|
||||
switch (parts.shift()) {
|
||||
case 'with':
|
||||
// enable module
|
||||
compile[key] = true;
|
||||
break;
|
||||
|
||||
case 'without':
|
||||
// disable module
|
||||
compile[key] = false;
|
||||
break;
|
||||
|
||||
case 'only':
|
||||
// disable other modules
|
||||
Object.keys(compile).forEach((key2) => {
|
||||
compile[key2] = key2 === key;
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Check if required modules in same monorepo are available
|
||||
const fileExists = (file) => {
|
||||
try {
|
||||
fs.statSync(file);
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
if (compile.dist && !fileExists(packagesDir + '/react/lib/icon.js')) {
|
||||
compile.lib = true;
|
||||
}
|
||||
|
||||
if (compile.api && !fileExists(packagesDir + '/react/lib/icon.d.ts')) {
|
||||
compile.lib = true;
|
||||
}
|
||||
|
||||
if (compile.lib && !fileExists(packagesDir + '/core/lib/modules.js')) {
|
||||
compile.core = true;
|
||||
}
|
||||
|
||||
// Compile core before compiling this package
|
||||
if (compile.core) {
|
||||
commands.push({
|
||||
cmd: 'npm',
|
||||
args: ['run', 'build'],
|
||||
cwd: packagesDir + '/core',
|
||||
});
|
||||
}
|
||||
|
||||
// Compile other packages
|
||||
Object.keys(compile).forEach((key) => {
|
||||
if (key !== 'core' && compile[key]) {
|
||||
commands.push({
|
||||
cmd: 'npm',
|
||||
args: ['run', 'build:' + key],
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Run next command
|
||||
*/
|
||||
const next = () => {
|
||||
const item = commands.shift();
|
||||
if (item === void 0) {
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
if (item.cwd === void 0) {
|
||||
item.cwd = __dirname;
|
||||
}
|
||||
|
||||
const result = child_process.spawnSync(item.cmd, item.args, {
|
||||
cwd: item.cwd,
|
||||
stdio: 'inherit',
|
||||
});
|
||||
|
||||
if (result.status === 0) {
|
||||
process.nextTick(next);
|
||||
} else {
|
||||
process.exit(result.status);
|
||||
}
|
||||
};
|
||||
next();
|
||||
21
packages/react/license.txt
Normal file
21
packages/react/license.txt
Normal file
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2019, 2020 Vjacheslav Trushkin
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
17180
packages/react/package-lock.json
generated
Normal file
17180
packages/react/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
42
packages/react/package.json
Normal file
42
packages/react/package.json
Normal file
@ -0,0 +1,42 @@
|
||||
{
|
||||
"name": "@iconify/react",
|
||||
"description": "Iconify icon component for React.",
|
||||
"author": "Vjacheslav Trushkin",
|
||||
"version": "3.0.0-dev",
|
||||
"license": "MIT",
|
||||
"bugs": "https://github.com/iconify/iconify/issues",
|
||||
"homepage": "https://iconify.design/",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/iconify/iconify.git",
|
||||
"directory": "packages/react"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "node build",
|
||||
"build:lib": "tsc -b",
|
||||
"build:dist": "rollup -c rollup.config.js",
|
||||
"build:api": "api-extractor run --local --verbose",
|
||||
"pretest": "npm run build",
|
||||
"test": "jest"
|
||||
},
|
||||
"main": "dist/offline.js",
|
||||
"module": "dist/offline.esm.js",
|
||||
"types": "dist/offline.d.ts",
|
||||
"devDependencies": {
|
||||
"@babel/preset-env": "^7.13.15",
|
||||
"@babel/preset-react": "^7.13.13",
|
||||
"@iconify/core": "^1.0.0-rc.4",
|
||||
"@microsoft/api-extractor": "^7.13.5",
|
||||
"@rollup/plugin-buble": "^0.21.3",
|
||||
"@rollup/plugin-commonjs": "^18.0.0",
|
||||
"@rollup/plugin-node-resolve": "^11.2.1",
|
||||
"@types/react": "^17.0.3",
|
||||
"babel-jest": "^26.6.3",
|
||||
"jest": "^26.6.3",
|
||||
"react": "^17.0.2",
|
||||
"react-test-renderer": "^17.0.2",
|
||||
"rollup": "^2.45.2",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"typescript": "^4.2.4"
|
||||
}
|
||||
}
|
||||
484
packages/react/readme.md
Normal file
484
packages/react/readme.md
Normal file
@ -0,0 +1,484 @@
|
||||
# Iconify for React
|
||||
|
||||
Iconify for React is not yet another icon component! There are many of them already.
|
||||
|
||||
Iconify is the most versatile icon framework.
|
||||
|
||||
- Unified icon framework that can be used with any icon library.
|
||||
- Out of the box includes 80+ icon sets with more than 70,000 icons.
|
||||
- Embed icons in HTML with SVG framework or components for front-end frameworks.
|
||||
- Embed icons in designs with plug-ins for Figma, Sketch and Adobe XD.
|
||||
- Add icon search to your applications with Iconify Icon Finder.
|
||||
|
||||
For more information visit [https://iconify.design/](https://iconify.design/).
|
||||
|
||||
Iconify for React is a part of Iconify framework that makes it easy to use many icon libraries with React.
|
||||
|
||||
Iconify for React features:
|
||||
|
||||
- Easy to use.
|
||||
- Bundles only icons that you need.
|
||||
- Change icon size and colour by changing font size and colour.
|
||||
- Renders pixel-perfect SVG.
|
||||
|
||||
## Installation
|
||||
|
||||
If you are using NPM:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify/react
|
||||
```
|
||||
|
||||
If you are using Yarn:
|
||||
|
||||
```bash
|
||||
yarn add --dev @iconify/react
|
||||
```
|
||||
|
||||
This package does not include icons. Icons are split into separate packages that available at NPM. See below.
|
||||
|
||||
## Usage
|
||||
|
||||
Install `@iconify/react` and packages for selected icon sets. Import `Icon` and/or `InlineIcon` from `@iconify/react` and icon data for icon you want to use:
|
||||
|
||||
```typescript
|
||||
import { Icon, InlineIcon } from '@iconify/react';
|
||||
import home from '@iconify-icons/mdi-light/home';
|
||||
import faceWithMonocle from '@iconify-icons/twemoji/face-with-monocle';
|
||||
```
|
||||
|
||||
Then use `Icon` or `InlineIcon` component with icon data as "icon" parameter:
|
||||
|
||||
```jsx
|
||||
<Icon icon={home} />
|
||||
<p>This is some text with <InlineIcon icon={faceWithMonocle} /></p>
|
||||
```
|
||||
|
||||
### String syntax
|
||||
|
||||
String syntax passes icon name to the component.
|
||||
|
||||
With this method the icon needs to be added only once. That means if you have multiple components using 'home' icon, you can add it only in your main component. This makes it easy to swap icons for an entire application.
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import { Icon, addIcon } from '@iconify/react';
|
||||
import homeIcon from '@iconify-icons/mdi-light/home';
|
||||
|
||||
addIcon('home', homeIcon);
|
||||
|
||||
export function MyComponent() {
|
||||
return (
|
||||
<div>
|
||||
<Icon icon="home" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Instead of adding icons one by one using `addIcon` function, you can import an entire icon set using `addCollection` function:
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import { Icon, addCollection } from '@iconify/react';
|
||||
|
||||
// Import requires bundler that can import JSON files
|
||||
import jamIcons from '@iconify/json/json/jam.json';
|
||||
|
||||
// Function automatically adds prefix from icon set, which in this case is 'jam', followed by ':', so
|
||||
// icon names added by function should be called with prefix, such as 'jam:home'
|
||||
addCollection(jamIcons);
|
||||
|
||||
// Example without prefix, all icons will have names as is, such as 'home'
|
||||
// addCollection(jamIcons, false);
|
||||
|
||||
export function MyComponent() {
|
||||
return (
|
||||
<div>
|
||||
<Icon icon="jam:home" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Example above imports an entire icon set. To learn how to create smaller bundles, check out Iconify documentation: https://docs.iconify.design/sources/bundles/
|
||||
|
||||
### Next.js notice
|
||||
|
||||
Code above will currently fail with Next.js. This is because Next.js uses outdated packaging software that does not support ES modules. But do not worry, there is a simple solution: switch to CommonJS icon packages.
|
||||
|
||||
To switch to CommonJS package, replace this line in example above:
|
||||
|
||||
```js
|
||||
import homeIcon from '@iconify-icons/mdi-light/home';
|
||||
```
|
||||
|
||||
with
|
||||
|
||||
```js
|
||||
import homeIcon from '@iconify/icons-mdi-light/home';
|
||||
```
|
||||
|
||||
All icons are available as ES modules for modern bundler and as CommonJS modules for outdated bundlers.
|
||||
|
||||
For more details, see "Icon packages" section below.
|
||||
|
||||
## Icon and InlineIcon
|
||||
|
||||
Both components are the same, the only difference is `InlineIcon` has a negative vertical alignment, so it behaves like a glyph.
|
||||
|
||||
Use `Icon` for decorations, `InlineIcon` if you are migrating from glyph font.
|
||||
|
||||
Visual example to show the difference between inline and block modes:
|
||||
|
||||
|
||||
|
||||
## Icon component properties
|
||||
|
||||
`icon` property is mandatory. It tells component what icon to render. If the property value is invalid, the component will render an empty icon. The value can be a string containing the icon name (icon must be registered before use by calling `addIcon` or `addCollection`, see instructions above) or an object containing the icon data.
|
||||
|
||||
The icon component has the following optional properties:
|
||||
|
||||
- `inline`. Changes icon behaviour to match icon fonts. See "Icon and InlineIcon" section above.
|
||||
- `width` and `height`. Icon dimensions. The default values are "1em" for both. See "Dimensions" section below.
|
||||
- `color`. Icon colour. This is the same as setting colour in style. See "Icon colour" section below.
|
||||
- `flip`, `hFlip`, `vFlip`. Flip icon horizontally and/or vertically. See "Transformations" section below.
|
||||
- `rotate`. Rotate icon by 90, 180 or 270 degrees. See "Transformations" section below.
|
||||
- `align`, `vAlign`, `hAlign`, `slice`. Icon alignment. See "Alignment" section below.
|
||||
|
||||
### Other properties and events
|
||||
|
||||
In addition to the properties mentioned above, the icon component accepts any other properties and events. All other properties and events will be passed to generated `SVG` element, so you can do stuff like assigning `onClick` event, setting the inline style, add title and so on.
|
||||
|
||||
### Dimensions
|
||||
|
||||
By default, icon height is "1em". With is dynamic, calculated using the icon's width to height ratio. This makes it easy to change icon size by changing `font-size` in the stylesheet, just like icon fonts.
|
||||
|
||||
There are several ways to change icon dimensions:
|
||||
|
||||
- Setting `font-size` in style (or `fontSize` if you are using inline style).
|
||||
- Setting `width` and/or `height` property.
|
||||
|
||||
Values for `width` and `height` can be numbers or strings.
|
||||
|
||||
If you set only one dimension, another dimension will be calculated using the icon's width to height ratio. For example, if the icon size is 16 x 24, you set the height to 48, the width will be set to 32. Calculations work not only with numbers, but also with string values.
|
||||
|
||||
#### Dimensions as numbers
|
||||
|
||||
You can use numbers for `width` and `height`.
|
||||
|
||||
```jsx
|
||||
<Icon icon={homeIcon} height={24} />
|
||||
```
|
||||
|
||||
```jsx
|
||||
<Icon icon="experiment" width={16} height={16} />
|
||||
```
|
||||
|
||||
Number values are treated as pixels. That means in examples above, values are identical to "24px" and "16px".
|
||||
|
||||
#### Dimensions as strings without units
|
||||
|
||||
If you use strings without units, they are treated the same as numbers in an example above.
|
||||
|
||||
```jsx
|
||||
<Icon icon={homeIcon} height="24" />
|
||||
```
|
||||
|
||||
```jsx
|
||||
<Icon icon="experiment" width="16" height={'16'} />
|
||||
```
|
||||
|
||||
#### Dimensions as strings with units
|
||||
|
||||
You can use units in width and height values:
|
||||
|
||||
```jsx
|
||||
<Icon icon={homeIcon} height="2em" />
|
||||
```
|
||||
|
||||
Be careful when using `calc`, view port based units or percentages. In SVG element they might not behave the way you expect them to behave and when using such units, you should consider settings both width and height.
|
||||
|
||||
#### Dimensions as 'auto'
|
||||
|
||||
Keyword "auto" sets dimensions to the icon's `viewBox` dimensions. For example, for 24 x 24 icon using `height="auto"` sets height to 24 pixels.
|
||||
|
||||
```jsx
|
||||
<Icon icon={homeIcon} height="auto" />
|
||||
```
|
||||
|
||||
### Icon colour
|
||||
|
||||
There are two types of icons: icons that do not have a palette and icons that do have a palette.
|
||||
|
||||
Icons that do have a palette, such as emojis, cannot be customised. Setting colour to such icons will not change anything.
|
||||
|
||||
Icons that do not have a palette can be customised. By default, colour is set to "currentColor", which means the icon's colour matches text colour. To change the colour you can:
|
||||
|
||||
- Set `color` style or use stylesheet to target icon. If you are using the stylesheet, target `svg` element.
|
||||
- Add `color` property.
|
||||
|
||||
Examples:
|
||||
|
||||
Using `color` property:
|
||||
|
||||
```jsx
|
||||
<Icon icon={alertIcon} color="red" />
|
||||
<Icon icon={alertIcon} color="#f00" />
|
||||
```
|
||||
|
||||
Using inline style:
|
||||
|
||||
```jsx
|
||||
<Icon icon={alertIcon} style={{color: 'red'}} />
|
||||
<Icon icon={alertIcon} style={{color: '#f00'}} />
|
||||
```
|
||||
|
||||
Using stylesheet:
|
||||
|
||||
```jsx
|
||||
<Icon icon={alertIcon} className="red-icon" />
|
||||
```
|
||||
|
||||
```css
|
||||
.red-icon {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
### Transformations
|
||||
|
||||
You can rotate and flip the icon.
|
||||
|
||||
This might seem redundant because icon can also be rotated and flipped using CSS transformations. So why do transformation properties exist? Because it is a different type of transformation.
|
||||
|
||||
- CSS transformations transform the entire icon.
|
||||
- Icon transformations transform the contents of the icon.
|
||||
|
||||
If you have a square icon, this makes no difference. However, if you have an icon that has different width and height values, it makes a huge difference.
|
||||
|
||||
Rotating 16x24 icon by 90 degrees results in:
|
||||
|
||||
- CSS transformation keeps 16x24 bounding box, which might cause the icon to overlap text around it.
|
||||
- Icon transformation changes bounding box to 24x16, rotating content inside an icon.
|
||||
|
||||
_TODO: show visual example_
|
||||
|
||||
#### Flipping an icon
|
||||
|
||||
There are several properties available to flip an icon:
|
||||
|
||||
- `hFlip`: boolean property, flips icon horizontally.
|
||||
- `vFlip`: boolean property, flips icon vertically.
|
||||
- `flip`: shorthand string property, can flip icon horizontally and/or vertically.
|
||||
|
||||
Examples:
|
||||
|
||||
Flip an icon horizontally:
|
||||
|
||||
```jsx
|
||||
<Icon icon={alertIcon} hFlip={true} />
|
||||
<Icon icon={alertIcon} flip="horizontal" />
|
||||
```
|
||||
|
||||
Flip an icon vertically:
|
||||
|
||||
```jsx
|
||||
<Icon icon={alertIcon} vFlip={true} />
|
||||
<Icon icon={alertIcon} flip="vertical" />
|
||||
```
|
||||
|
||||
Flip an icon horizontally and vertically (the same as 180 degrees rotation):
|
||||
|
||||
```jsx
|
||||
<Icon icon={alertIcon} hFlip={true} vFlip={true} />
|
||||
<Icon icon={alertIcon} flip="horizontal,vertical" />
|
||||
```
|
||||
|
||||
#### Rotating an icon
|
||||
|
||||
An icon can be rotated by 90, 180 and 270 degrees. Only contents of the icon are rotated.
|
||||
|
||||
To rotate an icon, use `rotate` property. Value can be a string (degrees or percentages) or a number.
|
||||
|
||||
Number values are 1 for 90 degrees, 2 for 180 degrees, 3 for 270 degrees.
|
||||
|
||||
Examples of 90 degrees rotation:
|
||||
|
||||
```jsx
|
||||
<Icon icon={alertIcon} rotate={1} />
|
||||
<Icon icon={alertIcon} rotate="90deg" />
|
||||
<Icon icon={alertIcon} rotate="25%" />
|
||||
```
|
||||
|
||||
### Alignment
|
||||
|
||||
Alignment matters only if you set the icon's width and height properties that do not match the viewBox with and height.
|
||||
|
||||
For example, if the icon is 24x24 and you set the width to 32 and height to 24. You must set both `width` and `height` properties for this to happen or use stylesheet to set both icon's width and height.
|
||||
|
||||
#### Stretching SVG
|
||||
|
||||
When you use incorrect width/height ratio for other images, browser stretches those images.
|
||||
|
||||
Unlike other images, SVG elements do not stretch. Instead, browser either adds space on sides of the icon (this is the default behaviour) or crops part of the icon.
|
||||
|
||||
|
||||
|
||||
#### Alignment properties
|
||||
|
||||
You can control the behaviour of SVG when using incorrect width/height ratio by setting alignment properties:
|
||||
|
||||
- `hAlign`: string property to set horizontal alignment. Possible values are "left", "center" and "right".
|
||||
- `vAlign`: string property to set vertical alignment. Possible values are "top", "middle" and "bottom".
|
||||
- `slice`: boolean property. See below.
|
||||
- `align`: shorthand string property. Value is the combination of vertical alignment values, horizontal alignment values, "meet" (same as `slice={false}`) and "slice" (same as `slice={true}`) separated by comma.
|
||||
|
||||
Example of aligning an icon to the left if icon is not square:
|
||||
|
||||
```jsx
|
||||
<Icon icon="experiment" width="1em" height="1em" hAlign="left" />
|
||||
```
|
||||
|
||||
#### Slice
|
||||
|
||||
Slice property tells the browser how to deal with extra space.
|
||||
|
||||
By default, `slice` is disabled. The browser will scale the icon to fit the bounding box.
|
||||
|
||||
Example showing the icon behaviour when `slice` is disabled with various alignment values:
|
||||
|
||||
|
||||
|
||||
If `slice` is enabled, the browser will scale the icon to fill the bounding box and hide parts that do not fit.
|
||||
|
||||
Example showing the icon behaviour when `slice` is enabled with various alignment values:
|
||||
|
||||
|
||||
|
||||
## Icon Packages
|
||||
|
||||
As of version 1.1.0 this package no longer includes icons. There are over 70k icons, each in its own file. That takes a lot of disc space. Because of that icons were moved to multiple separate packages, one package per icon set.
|
||||
|
||||
You can find all available icons at https://iconify.design/icon-sets/
|
||||
|
||||
Browse or search icons, click any icon and you will see a "React" tab that will give you exact code for the React component.
|
||||
|
||||
Import format for each icon is `@iconify-icons/{prefix}/{icon}` (for ES modules) or `@iconify/icons-{prefix}/{icon}` (for CommonJS modules), where `{prefix}` is collection prefix, and `{icon}` is the icon name.
|
||||
|
||||
Usage examples for a few popular icon packages:
|
||||
|
||||
### Material Design Icons
|
||||
|
||||
Package: https://www.npmjs.com/package/@iconify-icons/mdi
|
||||
|
||||
Icons list: https://iconify.design/icon-sets/mdi/
|
||||
|
||||
Installation:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify-icons/mdi
|
||||
```
|
||||
|
||||
Usage:
|
||||
|
||||
```js
|
||||
import { Icon, InlineIcon } from '@iconify/react';
|
||||
import home from '@iconify-icons/mdi/home';
|
||||
import accountCheck from '@iconify-icons/mdi/account-check';
|
||||
```
|
||||
|
||||
```jsx
|
||||
<Icon icon={home} />
|
||||
<p>This is some text with <InlineIcon icon={accountCheck} /></p>
|
||||
```
|
||||
|
||||
### Simple Icons (big collection of logos)
|
||||
|
||||
Package: https://www.npmjs.com/package/@iconify-icons/simple-icons
|
||||
|
||||
Icons list: https://iconify.design/icon-sets/simple-icons/
|
||||
|
||||
Installation:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify-icons/simple-icons
|
||||
```
|
||||
|
||||
Usage:
|
||||
|
||||
```js
|
||||
import { Icon, InlineIcon } from '@iconify/react';
|
||||
import behanceIcon from '@iconify-icons/simple-icons/behance';
|
||||
import mozillafirefoxIcon from '@iconify-icons/simple-icons/mozillafirefox';
|
||||
```
|
||||
|
||||
```jsx
|
||||
<Icon icon={behanceIcon} />
|
||||
<p>
|
||||
Mozilla Firefox <InlineIcon icon={mozillafirefoxIcon} /> is the best
|
||||
browser!
|
||||
</p>
|
||||
```
|
||||
|
||||
### Font Awesome 5 Solid
|
||||
|
||||
Package: https://www.npmjs.com/package/@iconify-icons/fa-solid
|
||||
|
||||
Icons list: https://iconify.design/icon-sets/fa-solid/
|
||||
|
||||
Installation:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify-icons/fa-solid
|
||||
```
|
||||
|
||||
Usage:
|
||||
|
||||
```js
|
||||
import { Icon, InlineIcon } from '@iconify/react';
|
||||
import toggleOn from '@iconify-icons/fa-solid/toggle-on';
|
||||
import chartBar from '@iconify-icons/fa-solid/chart-bar';
|
||||
```
|
||||
|
||||
```jsx
|
||||
<Icon icon={chartBar} />
|
||||
<p><InlineIcon icon={toggleOn} /> Click to toggle</p>
|
||||
```
|
||||
|
||||
### Noto Emoji
|
||||
|
||||
Package: https://www.npmjs.com/package/@iconify-icons/noto
|
||||
|
||||
Icons list: https://iconify.design/icon-sets/noto/
|
||||
|
||||
Installation:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify-icons/noto
|
||||
```
|
||||
|
||||
Usage:
|
||||
|
||||
```js
|
||||
import { Icon, InlineIcon } from '@iconify/react';
|
||||
import greenApple from '@iconify-icons/noto/green-apple';
|
||||
import huggingFace from '@iconify-icons/noto/hugging-face';
|
||||
```
|
||||
|
||||
```jsx
|
||||
<Icon icon={greenApple} />
|
||||
<p>Its time for hugs <InlineIcon icon={huggingFace} />!</p>
|
||||
```
|
||||
|
||||
### Other icon sets
|
||||
|
||||
There are over 50 icon sets. This readme shows only a few examples. See [Iconify icon sets](http://iconify.design/icon-sets/) for a full list of available icon sets. Click any icon to see code.
|
||||
|
||||
## License
|
||||
|
||||
React component is released with MIT license.
|
||||
|
||||
© 2020 Iconify OÜ
|
||||
|
||||
See [Iconify icon sets page](https://iconify.design/icon-sets/) for list of collections and their licenses.
|
||||
64
packages/react/rollup.config.js
Normal file
64
packages/react/rollup.config.js
Normal file
@ -0,0 +1,64 @@
|
||||
import { writeFileSync, mkdirSync } from 'fs';
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import buble from '@rollup/plugin-buble';
|
||||
import { terser } from 'rollup-plugin-terser';
|
||||
|
||||
const name = 'offline';
|
||||
|
||||
// Write main file
|
||||
const text = `'use strict'
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
module.exports = require('./${name}.cjs.production.js')
|
||||
} else {
|
||||
module.exports = require('./${name}.cjs.development.js')
|
||||
}
|
||||
`;
|
||||
|
||||
try {
|
||||
mkdirSync('dist', 0o755);
|
||||
} catch (err) {}
|
||||
writeFileSync(`dist/${name}.js`, text, 'utf8');
|
||||
|
||||
// Export configuration
|
||||
const config = [
|
||||
// Module
|
||||
{
|
||||
input: `lib/${name}.js`,
|
||||
output: [
|
||||
{
|
||||
file: `dist/${name}.esm.js`,
|
||||
format: 'esm',
|
||||
},
|
||||
],
|
||||
external: ['react'],
|
||||
plugins: [resolve(), commonjs(), buble()],
|
||||
},
|
||||
// Dev build
|
||||
{
|
||||
input: `lib/${name}.js`,
|
||||
output: [
|
||||
{
|
||||
file: `dist/${name}.cjs.development.js`,
|
||||
format: 'cjs',
|
||||
},
|
||||
],
|
||||
external: ['react'],
|
||||
plugins: [resolve(), commonjs(), buble()],
|
||||
},
|
||||
// Production
|
||||
{
|
||||
input: `lib/${name}.js`,
|
||||
output: [
|
||||
{
|
||||
file: `dist/${name}.cjs.production.js`,
|
||||
format: 'cjs',
|
||||
},
|
||||
],
|
||||
external: ['react'],
|
||||
plugins: [resolve(), commonjs(), buble(), terser()],
|
||||
},
|
||||
];
|
||||
|
||||
export default config;
|
||||
124
packages/react/src/offline.ts
Normal file
124
packages/react/src/offline.ts
Normal file
@ -0,0 +1,124 @@
|
||||
import React from 'react';
|
||||
import type { IconifyIcon, IconifyJSON } from '@iconify/types';
|
||||
import type {
|
||||
IconifyHorizontalIconAlignment,
|
||||
IconifyVerticalIconAlignment,
|
||||
IconifyIconSize,
|
||||
} from '@iconify/core/lib/customisations';
|
||||
import { fullIcon } from '@iconify/core/lib/icon';
|
||||
import { parseIconSet } from '@iconify/core/lib/icon/icon-set';
|
||||
import type {
|
||||
IconifyIconCustomisations,
|
||||
IconifyIconProps,
|
||||
IconProps,
|
||||
IconRef,
|
||||
} from './props';
|
||||
import { render } from './render';
|
||||
|
||||
/**
|
||||
* Export stuff from props.ts
|
||||
*/
|
||||
export { IconifyIconCustomisations, IconifyIconProps, IconProps };
|
||||
|
||||
/**
|
||||
* Export types that could be used in component
|
||||
*/
|
||||
export {
|
||||
IconifyIcon,
|
||||
IconifyJSON,
|
||||
IconifyHorizontalIconAlignment,
|
||||
IconifyVerticalIconAlignment,
|
||||
IconifyIconSize,
|
||||
};
|
||||
|
||||
/**
|
||||
* Storage for icons referred by name
|
||||
*/
|
||||
const storage: Record<string, Required<IconifyIcon>> = Object.create(null);
|
||||
|
||||
/**
|
||||
* Generate icon
|
||||
*/
|
||||
function component(
|
||||
props: IconProps,
|
||||
inline: boolean,
|
||||
ref?: IconRef
|
||||
): JSX.Element {
|
||||
// Split properties
|
||||
const icon =
|
||||
typeof props.icon === 'string'
|
||||
? storage[props.icon]
|
||||
: typeof props.icon === 'object'
|
||||
? fullIcon(props.icon)
|
||||
: null;
|
||||
|
||||
// Validate icon object
|
||||
if (
|
||||
icon === null ||
|
||||
typeof icon !== 'object' ||
|
||||
typeof icon.body !== 'string'
|
||||
) {
|
||||
return props.children
|
||||
? (props.children as JSX.Element)
|
||||
: React.createElement('span', {});
|
||||
}
|
||||
|
||||
// Valid icon: render it
|
||||
return render(icon, props, inline, ref);
|
||||
}
|
||||
|
||||
/**
|
||||
* Type for exported components
|
||||
*/
|
||||
export type Component = (props: IconProps) => JSX.Element;
|
||||
|
||||
/**
|
||||
* Block icon
|
||||
*
|
||||
* @param props - Component properties
|
||||
*/
|
||||
export const Icon: Component = React.forwardRef(
|
||||
(props: IconProps, ref?: IconRef) => component(props, false, ref)
|
||||
);
|
||||
|
||||
/**
|
||||
* Inline icon (has negative verticalAlign that makes it behave like icon font)
|
||||
*
|
||||
* @param props - Component properties
|
||||
*/
|
||||
export const InlineIcon: Component = React.forwardRef(
|
||||
(props: IconProps, ref?: IconRef) => component(props, true, ref)
|
||||
);
|
||||
|
||||
/**
|
||||
* Add icon to storage, allowing to call it by name
|
||||
*
|
||||
* @param name
|
||||
* @param data
|
||||
*/
|
||||
export function addIcon(name: string, data: IconifyIcon): void {
|
||||
storage[name] = fullIcon(data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add collection to storage, allowing to call icons by name
|
||||
*
|
||||
* @param data Icon set
|
||||
* @param prefix Optional prefix to add to icon names, true if prefix from icon set should be used.
|
||||
*/
|
||||
export function addCollection(
|
||||
data: IconifyJSON,
|
||||
prefix?: string | boolean
|
||||
): void {
|
||||
const iconPrefix: string =
|
||||
typeof prefix === 'string'
|
||||
? prefix
|
||||
: prefix !== false && typeof data.prefix === 'string'
|
||||
? data.prefix + ':'
|
||||
: '';
|
||||
parseIconSet(data, (name, icon) => {
|
||||
if (icon !== null) {
|
||||
storage[iconPrefix + name] = icon;
|
||||
}
|
||||
});
|
||||
}
|
||||
45
packages/react/src/props.ts
Normal file
45
packages/react/src/props.ts
Normal file
@ -0,0 +1,45 @@
|
||||
import type { HTMLProps, RefObject } from 'react';
|
||||
import type { IconifyIcon } from '@iconify/types';
|
||||
import type { IconifyIconCustomisations as IconCustomisations } from '@iconify/core/lib/customisations';
|
||||
|
||||
// Allow rotation to be string
|
||||
/**
|
||||
* Icon customisations
|
||||
*/
|
||||
export type IconifyIconCustomisations = IconCustomisations & {
|
||||
rotate?: string | number;
|
||||
};
|
||||
|
||||
/**
|
||||
* Icon properties
|
||||
*/
|
||||
export interface IconifyIconProps extends IconifyIconCustomisations {
|
||||
// Icon object or icon name (must be added to storage using addIcon for offline package)
|
||||
icon: IconifyIcon | string;
|
||||
|
||||
// Style
|
||||
color?: string;
|
||||
|
||||
// Shorthand properties
|
||||
flip?: string;
|
||||
align?: string;
|
||||
|
||||
// Unique id, used as base for ids for shapes. Use it to get consistent ids for server side rendering
|
||||
id?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* React component properties: generic element for Icon component, SVG for generated component
|
||||
*/
|
||||
type IconifyElementProps = HTMLProps<HTMLElement>;
|
||||
|
||||
export type IconRef = RefObject<SVGElement>;
|
||||
|
||||
export interface ReactRefProp {
|
||||
ref?: IconRef;
|
||||
}
|
||||
|
||||
/**
|
||||
* Mix of icon properties and HTMLElement properties
|
||||
*/
|
||||
export type IconProps = IconifyElementProps & IconifyIconProps & ReactRefProp;
|
||||
147
packages/react/src/render.ts
Normal file
147
packages/react/src/render.ts
Normal file
@ -0,0 +1,147 @@
|
||||
import type { SVGProps } from 'react';
|
||||
import React from 'react';
|
||||
import type { IconifyIcon } from '@iconify/types';
|
||||
import type { FullIconCustomisations } from '@iconify/core/lib/customisations';
|
||||
import { defaults } from '@iconify/core/lib/customisations';
|
||||
import {
|
||||
flipFromString,
|
||||
alignmentFromString,
|
||||
} from '@iconify/core/lib/customisations/shorthand';
|
||||
import { rotateFromString } from '@iconify/core/lib/customisations/rotate';
|
||||
import { iconToSVG } from '@iconify/core/lib/builder';
|
||||
import { replaceIDs } from '@iconify/core/lib/builder/ids';
|
||||
import { merge } from '@iconify/core/lib/misc/merge';
|
||||
import type { IconifyIconCustomisations, IconProps, IconRef } from './props';
|
||||
|
||||
/**
|
||||
* Default SVG attributes
|
||||
*/
|
||||
const svgDefaults: SVGProps<SVGElement> = {
|
||||
'xmlns': 'http://www.w3.org/2000/svg',
|
||||
'xmlnsXlink': 'http://www.w3.org/1999/xlink',
|
||||
'aria-hidden': true,
|
||||
'role': 'img',
|
||||
'style': {}, // Include style if it isn't set to add verticalAlign later
|
||||
};
|
||||
|
||||
/**
|
||||
* Default values for customisations for inline icon
|
||||
*/
|
||||
const inlineDefaults = merge(defaults, {
|
||||
inline: true,
|
||||
} as IconifyIconCustomisations) as FullIconCustomisations;
|
||||
|
||||
/**
|
||||
* Render icon
|
||||
*/
|
||||
export const render = (
|
||||
// Icon must be validated before calling this function
|
||||
icon: Required<IconifyIcon>,
|
||||
|
||||
// Partial properties
|
||||
props: IconProps,
|
||||
|
||||
// True if icon should have vertical-align added
|
||||
inline: boolean,
|
||||
|
||||
// Optional reference for SVG, extracted by React.forwardRef()
|
||||
ref?: IconRef
|
||||
): JSX.Element => {
|
||||
// Get default properties
|
||||
const defaultProps = inline ? inlineDefaults : defaults;
|
||||
|
||||
// Get all customisations
|
||||
const customisations = merge(
|
||||
defaultProps,
|
||||
props as IconifyIconCustomisations
|
||||
) as FullIconCustomisations;
|
||||
|
||||
// Create style
|
||||
const style =
|
||||
typeof props.style === 'object' && props.style !== null
|
||||
? props.style
|
||||
: {};
|
||||
|
||||
// Create SVG component properties
|
||||
const componentProps = merge(svgDefaults, {
|
||||
ref,
|
||||
style,
|
||||
});
|
||||
|
||||
// Get element properties
|
||||
for (let key in props) {
|
||||
const value = props[key];
|
||||
switch (key) {
|
||||
// Properties to ignore
|
||||
case 'icon':
|
||||
case 'style':
|
||||
break;
|
||||
|
||||
// Flip as string: 'horizontal,vertical'
|
||||
case 'flip':
|
||||
if (typeof value === 'string') {
|
||||
flipFromString(customisations, value);
|
||||
}
|
||||
break;
|
||||
|
||||
// Alignment as string
|
||||
case 'align':
|
||||
if (typeof value === 'string') {
|
||||
alignmentFromString(customisations, value);
|
||||
}
|
||||
break;
|
||||
|
||||
// Color: copy to style
|
||||
case 'color':
|
||||
style.color = value;
|
||||
break;
|
||||
|
||||
// Rotation as string
|
||||
case 'rotate':
|
||||
if (typeof value === 'string') {
|
||||
customisations[key] = rotateFromString(value);
|
||||
} else if (typeof value === 'number') {
|
||||
componentProps[key] = value;
|
||||
}
|
||||
break;
|
||||
|
||||
// Remove aria-hidden
|
||||
case 'ariaHidden':
|
||||
case 'aria-hidden':
|
||||
if (value !== true && value !== 'true') {
|
||||
delete componentProps['aria-hidden'];
|
||||
}
|
||||
break;
|
||||
|
||||
// Copy missing property if it does not exist in customisations
|
||||
default:
|
||||
if (defaultProps[key] === void 0) {
|
||||
componentProps[key] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Generate icon
|
||||
const item = iconToSVG(icon, customisations);
|
||||
|
||||
// Counter for ids based on "id" property to render icons consistently on server and client
|
||||
let localCounter = 0;
|
||||
const id = props.id;
|
||||
|
||||
// Add icon stuff
|
||||
componentProps.dangerouslySetInnerHTML = {
|
||||
__html: replaceIDs(
|
||||
item.body,
|
||||
id ? () => id + '-' + localCounter++ : 'iconify-react-'
|
||||
),
|
||||
};
|
||||
for (let key in item.attributes) {
|
||||
componentProps[key] = item.attributes[key];
|
||||
}
|
||||
|
||||
if (item.inline && style.verticalAlign === void 0) {
|
||||
style.verticalAlign = '-0.125em';
|
||||
}
|
||||
|
||||
return React.createElement('svg', componentProps);
|
||||
};
|
||||
527
packages/react/tests/icon.test.js
Normal file
527
packages/react/tests/icon.test.js
Normal file
@ -0,0 +1,527 @@
|
||||
import React from 'react';
|
||||
import { Icon, InlineIcon, addIcon, addCollection } from '../';
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
const iconData = {
|
||||
body:
|
||||
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
|
||||
width: 24,
|
||||
height: 24,
|
||||
};
|
||||
|
||||
const iconDataWithID = {
|
||||
body:
|
||||
'<defs><path id="ssvg-id-1st-place-medala" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medald" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medalf" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medalh" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medalj" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medalm" d="M.93.01h120.55v58.36H.93z"/><path d="M52.849 78.373v-3.908c3.681-.359 6.25-.958 7.703-1.798c1.454-.84 2.54-2.828 3.257-5.962h4.021v40.385h-5.437V78.373h-9.544z" id="ssvg-id-1st-place-medalp"/><linearGradient x1="49.998%" y1="-13.249%" x2="49.998%" y2="90.002%" id="ssvg-id-1st-place-medalb"><stop stop-color="#1E88E5" offset="13.55%"/><stop stop-color="#1565C0" offset="93.8%"/></linearGradient><linearGradient x1="26.648%" y1="2.735%" x2="77.654%" y2="105.978%" id="ssvg-id-1st-place-medalk"><stop stop-color="#64B5F6" offset="13.55%"/><stop stop-color="#2196F3" offset="94.62%"/></linearGradient><radialGradient cx="22.368%" cy="12.5%" fx="22.368%" fy="12.5%" r="95.496%" id="ssvg-id-1st-place-medalo"><stop stop-color="#FFEB3B" offset="29.72%"/><stop stop-color="#FBC02D" offset="95.44%"/></radialGradient></defs><g fill="none" fill-rule="evenodd"><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medalc" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medala"/></mask><path fill="url(#ssvg-id-1st-place-medalb)" fill-rule="nonzero" mask="url(#ssvg-id-1st-place-medalc)" d="M45.44 42.18h31.43l30-48.43H75.44z"/></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medale" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medald"/></mask><g opacity=".2" mask="url(#ssvg-id-1st-place-medale)" fill="#424242" fill-rule="nonzero"><path d="M101.23-3L75.2 39H50.85L77.11-3h24.12zm5.64-3H75.44l-30 48h31.42l30.01-48z"/></g></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medalg" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medalf"/></mask><path d="M79 30H43c-4.42 0-8 3.58-8 8v16.04c0 2.17 1.8 3.95 4.02 3.96h.01c2.23-.01 4.97-1.75 4.97-3.96V44c0-1.1.9-2 2-2h30c1.1 0 2 .9 2 2v9.93c0 1.98 2.35 3.68 4.22 4.04c.26.05.52.08.78.08c2.21 0 4-1.79 4-4V38c0-4.42-3.58-8-8-8z" fill="#FDD835" fill-rule="nonzero" mask="url(#ssvg-id-1st-place-medalg)"/></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medali" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medalh"/></mask><g opacity=".2" mask="url(#ssvg-id-1st-place-medali)" fill="#424242" fill-rule="nonzero"><path d="M79 32c3.31 0 6 2.69 6 6v16.04A2.006 2.006 0 0 1 82.59 56c-1.18-.23-2.59-1.35-2.59-2.07V44c0-2.21-1.79-4-4-4H46c-2.21 0-4 1.79-4 4v10.04c0 .88-1.64 1.96-2.97 1.96c-1.12-.01-2.03-.89-2.03-1.96V38c0-3.31 2.69-6 6-6h36zm0-2H43c-4.42 0-8 3.58-8 8v16.04c0 2.17 1.8 3.95 4.02 3.96h.01c2.23-.01 4.97-1.75 4.97-3.96V44c0-1.1.9-2 2-2h30c1.1 0 2 .9 2 2v9.93c0 1.98 2.35 3.68 4.22 4.04c.26.05.52.08.78.08c2.21 0 4-1.79 4-4V38c0-4.42-3.58-8-8-8z"/></g></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medall" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medalj"/></mask><path fill="url(#ssvg-id-1st-place-medalk)" fill-rule="nonzero" mask="url(#ssvg-id-1st-place-medall)" d="M76.87 42.18H45.44l-30-48.43h31.43z"/></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medaln" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medalm"/></mask><g opacity=".2" mask="url(#ssvg-id-1st-place-medaln)" fill="#424242" fill-rule="nonzero"><path d="M45.1-3l26.35 42H47.1L20.86-3H45.1zm1.77-3H15.44l30 48h31.42L46.87-6z"/></g></g><circle fill="url(#ssvg-id-1st-place-medalo)" fill-rule="nonzero" cx="64" cy="86" r="38"/><path d="M64 51c19.3 0 35 15.7 35 35s-15.7 35-35 35s-35-15.7-35-35s15.7-35 35-35zm0-3c-20.99 0-38 17.01-38 38s17.01 38 38 38s38-17.01 38-38s-17.01-38-38-38z" opacity=".2" fill="#424242" fill-rule="nonzero"/><path d="M47.3 63.59h33.4v44.4H47.3z"/><use fill="#000" xlink:href="#ssvg-id-1st-place-medalp"/><use fill="#FFA000" xlink:href="#ssvg-id-1st-place-medalp"/></g>',
|
||||
width: 128,
|
||||
height: 128,
|
||||
};
|
||||
|
||||
describe('Creating component', () => {
|
||||
test('basic icon', () => {
|
||||
const component = renderer.create(<Icon icon={iconData} />);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree).toMatchObject({
|
||||
type: 'svg',
|
||||
props: {
|
||||
'xmlns': 'http://www.w3.org/2000/svg',
|
||||
'xmlnsXlink': 'http://www.w3.org/1999/xlink',
|
||||
'aria-hidden': true,
|
||||
'role': 'img',
|
||||
'style': {},
|
||||
'dangerouslySetInnerHTML': {
|
||||
__html: iconData.body,
|
||||
},
|
||||
'width': '1em',
|
||||
'height': '1em',
|
||||
'preserveAspectRatio': 'xMidYMid meet',
|
||||
'viewBox': '0 0 ' + iconData.width + ' ' + iconData.height,
|
||||
},
|
||||
children: null,
|
||||
});
|
||||
});
|
||||
|
||||
test('inline icon', () => {
|
||||
const component = renderer.create(<InlineIcon icon={iconData} />);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree).toMatchObject({
|
||||
type: 'svg',
|
||||
props: {
|
||||
'xmlns': 'http://www.w3.org/2000/svg',
|
||||
'xmlnsXlink': 'http://www.w3.org/1999/xlink',
|
||||
'aria-hidden': true,
|
||||
'role': 'img',
|
||||
'style': {
|
||||
verticalAlign: '-0.125em',
|
||||
},
|
||||
'dangerouslySetInnerHTML': {
|
||||
__html: iconData.body,
|
||||
},
|
||||
'width': '1em',
|
||||
'height': '1em',
|
||||
'preserveAspectRatio': 'xMidYMid meet',
|
||||
'viewBox': '0 0 ' + iconData.width + ' ' + iconData.height,
|
||||
},
|
||||
children: null,
|
||||
});
|
||||
});
|
||||
|
||||
test('empty icon', () => {
|
||||
const component = renderer.create(<Icon />);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree).toMatchObject({
|
||||
type: 'span',
|
||||
props: {},
|
||||
children: null,
|
||||
});
|
||||
});
|
||||
|
||||
test('empty icon with children', () => {
|
||||
// Missing 'icon' property, should render children
|
||||
const component = renderer.create(
|
||||
<Icon>
|
||||
<i class="fa fa-home" />
|
||||
</Icon>
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree).toMatchObject({
|
||||
type: 'i',
|
||||
props: {},
|
||||
children: null,
|
||||
});
|
||||
});
|
||||
|
||||
test('empty icon with text children', () => {
|
||||
// Missing 'icon' property, should render children
|
||||
const component = renderer.create(<Icon>icon</Icon>);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree).toMatch('icon');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Using storage', () => {
|
||||
test('using storage', () => {
|
||||
addIcon('test-icon', iconData);
|
||||
const component = renderer.create(<Icon icon="test-icon" />);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree).toMatchObject({
|
||||
type: 'svg',
|
||||
props: {
|
||||
'xmlns': 'http://www.w3.org/2000/svg',
|
||||
'xmlnsXlink': 'http://www.w3.org/1999/xlink',
|
||||
'aria-hidden': true,
|
||||
'role': 'img',
|
||||
'style': {},
|
||||
'dangerouslySetInnerHTML': {
|
||||
__html: iconData.body,
|
||||
},
|
||||
'width': '1em',
|
||||
'height': '1em',
|
||||
'preserveAspectRatio': 'xMidYMid meet',
|
||||
'viewBox': '0 0 ' + iconData.width + ' ' + iconData.height,
|
||||
},
|
||||
children: null,
|
||||
});
|
||||
});
|
||||
|
||||
test('using storage with icon set', () => {
|
||||
const iconSet = {
|
||||
prefix: 'mdi-light',
|
||||
icons: {
|
||||
account: {
|
||||
body:
|
||||
'<path d="M11.5 14c4.142 0 7.5 1.567 7.5 3.5V20H4v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5zM11.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5z" fill="currentColor"/>',
|
||||
},
|
||||
home: {
|
||||
body:
|
||||
'<path d="M16 8.414l-4.5-4.5L4.414 11H6v8h3v-6h5v6h3v-8h1.586L17 9.414V6h-1v2.414zM2 12l9.5-9.5L15 6V5h3v4l3 3h-3v7.998h-5v-6h-3v6H5V12H2z" fill="currentColor"/>',
|
||||
},
|
||||
},
|
||||
width: 24,
|
||||
height: 24,
|
||||
};
|
||||
|
||||
addCollection(iconSet);
|
||||
const component = renderer.create(<Icon icon="mdi-light:account" />);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree).toMatchObject({
|
||||
type: 'svg',
|
||||
props: {
|
||||
'xmlns': 'http://www.w3.org/2000/svg',
|
||||
'xmlnsXlink': 'http://www.w3.org/1999/xlink',
|
||||
'aria-hidden': true,
|
||||
'role': 'img',
|
||||
'style': {},
|
||||
'dangerouslySetInnerHTML': {
|
||||
__html: iconSet.icons.account.body,
|
||||
},
|
||||
'width': '1em',
|
||||
'height': '1em',
|
||||
'preserveAspectRatio': 'xMidYMid meet',
|
||||
'viewBox': '0 0 ' + iconSet.width + ' ' + iconSet.height,
|
||||
},
|
||||
children: null,
|
||||
});
|
||||
});
|
||||
|
||||
test('using storage with icon set with custom prefix', () => {
|
||||
const iconSet = {
|
||||
prefix: 'mdi-light',
|
||||
icons: {
|
||||
'account-alert': {
|
||||
body:
|
||||
'<path d="M10.5 14c4.142 0 7.5 1.567 7.5 3.5V20H3v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S4 16.12 4 17.5V19h13v-1.5zM10.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM20 16v-1h1v1h-1zm0-3V7h1v6h-1z" fill="currentColor"/>',
|
||||
},
|
||||
'link': {
|
||||
body:
|
||||
'<path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"/>',
|
||||
},
|
||||
},
|
||||
width: 24,
|
||||
height: 24,
|
||||
};
|
||||
|
||||
addCollection(iconSet, 'custom-');
|
||||
const component = renderer.create(<Icon icon="custom-link" />);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree).toMatchObject({
|
||||
type: 'svg',
|
||||
props: {
|
||||
'xmlns': 'http://www.w3.org/2000/svg',
|
||||
'xmlnsXlink': 'http://www.w3.org/1999/xlink',
|
||||
'aria-hidden': true,
|
||||
'role': 'img',
|
||||
'style': {},
|
||||
'dangerouslySetInnerHTML': {
|
||||
__html: iconSet.icons.link.body,
|
||||
},
|
||||
'width': '1em',
|
||||
'height': '1em',
|
||||
'preserveAspectRatio': 'xMidYMid meet',
|
||||
'viewBox': '0 0 ' + iconSet.width + ' ' + iconSet.height,
|
||||
},
|
||||
children: null,
|
||||
});
|
||||
});
|
||||
|
||||
test('missing icon from storage', () => {
|
||||
const component = renderer.create(<Icon icon="missing-icon" />);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree).toMatchObject({
|
||||
type: 'span',
|
||||
props: {},
|
||||
children: null,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Replacing IDs', () => {
|
||||
test('default behavior', () => {
|
||||
const component = renderer.create(<Icon icon={iconDataWithID} />);
|
||||
const tree = component.toJSON();
|
||||
const body = tree.props.dangerouslySetInnerHTML.__html;
|
||||
|
||||
expect(body).not.toStrictEqual(iconDataWithID.body);
|
||||
});
|
||||
|
||||
test('custom generator', () => {
|
||||
const component = renderer.create(
|
||||
<Icon icon={iconDataWithID} id="test" />
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
const body = tree.props.dangerouslySetInnerHTML.__html;
|
||||
|
||||
// Generate expected body
|
||||
let expected = iconDataWithID.body;
|
||||
const replacements = {
|
||||
'ssvg-id-1st-place-medala': 'test-0',
|
||||
'ssvg-id-1st-place-medald': 'test-1',
|
||||
'ssvg-id-1st-place-medalf': 'test-2',
|
||||
'ssvg-id-1st-place-medalh': 'test-3',
|
||||
'ssvg-id-1st-place-medalj': 'test-4',
|
||||
'ssvg-id-1st-place-medalm': 'test-5',
|
||||
'ssvg-id-1st-place-medalp': 'test-6',
|
||||
'ssvg-id-1st-place-medalb': 'test-7',
|
||||
'ssvg-id-1st-place-medalk': 'test-8',
|
||||
'ssvg-id-1st-place-medalo': 'test-9',
|
||||
'ssvg-id-1st-place-medalc': 'test-10',
|
||||
'ssvg-id-1st-place-medale': 'test-11',
|
||||
'ssvg-id-1st-place-medalg': 'test-12',
|
||||
'ssvg-id-1st-place-medali': 'test-13',
|
||||
'ssvg-id-1st-place-medall': 'test-14',
|
||||
'ssvg-id-1st-place-medaln': 'test-15',
|
||||
};
|
||||
Object.keys(replacements).forEach((search) => {
|
||||
expected = expected.replace(
|
||||
new RegExp(search, 'g'),
|
||||
replacements[search]
|
||||
);
|
||||
});
|
||||
|
||||
expect(body).toStrictEqual(expected);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Passing attributes', () => {
|
||||
test('title', () => {
|
||||
const component = renderer.create(
|
||||
<Icon icon={iconData} title="Icon!" />
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree.props.title).toStrictEqual('Icon!');
|
||||
});
|
||||
|
||||
test('aria-hidden', () => {
|
||||
const component = renderer.create(
|
||||
<InlineIcon icon={iconData} aria-hidden="false" />
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree.props['aria-hidden']).toStrictEqual(void 0);
|
||||
});
|
||||
|
||||
test('ariaHidden', () => {
|
||||
const component = renderer.create(
|
||||
<InlineIcon icon={iconData} ariaHidden="false" />
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree.props['aria-hidden']).toStrictEqual(void 0);
|
||||
});
|
||||
|
||||
test('style', () => {
|
||||
const component = renderer.create(
|
||||
<InlineIcon
|
||||
icon={iconData}
|
||||
style={{ verticalAlign: '0', color: 'red' }}
|
||||
/>
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree.props.style).toMatchObject({
|
||||
verticalAlign: '0',
|
||||
color: 'red',
|
||||
});
|
||||
});
|
||||
|
||||
test('color', () => {
|
||||
const component = renderer.create(<Icon icon={iconData} color="red" />);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree.props.style).toMatchObject({
|
||||
color: 'red',
|
||||
});
|
||||
});
|
||||
|
||||
test('color with style', () => {
|
||||
const component = renderer.create(
|
||||
<Icon icon={iconData} color="red" style={{ color: 'green' }} />
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree.props.style).toMatchObject({
|
||||
color: 'red',
|
||||
});
|
||||
});
|
||||
|
||||
test('attributes that cannot change', () => {
|
||||
const component = renderer.create(
|
||||
<InlineIcon
|
||||
icon={iconData}
|
||||
viewBox="0 0 0 0"
|
||||
preserveAspectRatio="none"
|
||||
/>
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree.props.viewBox).toStrictEqual('0 0 24 24');
|
||||
expect(tree.props.preserveAspectRatio).toStrictEqual('xMidYMid meet');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Dimensions', () => {
|
||||
test('height', () => {
|
||||
const component = renderer.create(
|
||||
<InlineIcon icon={iconData} height="48" />
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree.props.height).toStrictEqual('48');
|
||||
expect(tree.props.width).toStrictEqual('48');
|
||||
});
|
||||
|
||||
test('width and height', () => {
|
||||
const component = renderer.create(
|
||||
<InlineIcon icon={iconData} width={32} height="48" />
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree.props.height).toStrictEqual('48');
|
||||
expect(tree.props.width).toStrictEqual('32');
|
||||
});
|
||||
|
||||
test('auto', () => {
|
||||
const component = renderer.create(
|
||||
<InlineIcon icon={iconData} height="auto" />
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree.props.height).toStrictEqual('24');
|
||||
expect(tree.props.width).toStrictEqual('24');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Rotation', () => {
|
||||
test('number', () => {
|
||||
const component = renderer.create(
|
||||
<InlineIcon icon={iconData} rotate={1} />
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
const body = tree.props.dangerouslySetInnerHTML.__html;
|
||||
|
||||
expect(body).not.toStrictEqual(iconData.body);
|
||||
expect(body).toMatch('rotate(90 ');
|
||||
});
|
||||
|
||||
test('string', () => {
|
||||
const component = renderer.create(
|
||||
<InlineIcon icon={iconData} rotate="180deg" />
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
const body = tree.props.dangerouslySetInnerHTML.__html;
|
||||
|
||||
expect(body).not.toStrictEqual(iconData.body);
|
||||
expect(body).toMatch('rotate(180 ');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Flip', () => {
|
||||
test('boolean', () => {
|
||||
const component = renderer.create(
|
||||
<InlineIcon icon={iconData} hFlip={true} />
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
const body = tree.props.dangerouslySetInnerHTML.__html;
|
||||
|
||||
expect(body).not.toStrictEqual(iconData.body);
|
||||
expect(body).toMatch('scale(-1 1)');
|
||||
});
|
||||
|
||||
test('string', () => {
|
||||
const component = renderer.create(
|
||||
<InlineIcon icon={iconData} flip="vertical" />
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
const body = tree.props.dangerouslySetInnerHTML.__html;
|
||||
|
||||
expect(body).not.toStrictEqual(iconData.body);
|
||||
expect(body).toMatch('scale(1 -1)');
|
||||
});
|
||||
|
||||
test('string and boolean', () => {
|
||||
const component = renderer.create(
|
||||
<InlineIcon icon={iconData} flip="horizontal" vFlip={true} />
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
const body = tree.props.dangerouslySetInnerHTML.__html;
|
||||
|
||||
expect(body).not.toStrictEqual(iconData.body);
|
||||
// horizontal + vertical = 180deg rotation
|
||||
expect(body).toMatch('rotate(180 ');
|
||||
});
|
||||
|
||||
test('string for boolean attribute', () => {
|
||||
const component = renderer.create(
|
||||
<InlineIcon icon={iconData} hFlip="true" />
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
const body = tree.props.dangerouslySetInnerHTML.__html;
|
||||
|
||||
expect(body).not.toStrictEqual(iconData.body);
|
||||
expect(body).toMatch('scale(-1 1)');
|
||||
});
|
||||
|
||||
test('shorthand and boolean', () => {
|
||||
// 'flip' is processed after 'hFlip', overwriting value
|
||||
const component = renderer.create(
|
||||
<InlineIcon icon={iconData} flip="horizontal" hFlip={false} />
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
const body = tree.props.dangerouslySetInnerHTML.__html;
|
||||
|
||||
expect(body).not.toStrictEqual(iconData.body);
|
||||
expect(body).toMatch('scale(-1 1)');
|
||||
});
|
||||
|
||||
test('shorthand and boolean as string', () => {
|
||||
const component = renderer.create(
|
||||
<InlineIcon icon={iconData} flip="vertical" hFlip="true" />
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
const body = tree.props.dangerouslySetInnerHTML.__html;
|
||||
|
||||
expect(body).not.toStrictEqual(iconData.body);
|
||||
// horizontal + vertical = 180deg rotation
|
||||
expect(body).toMatch('rotate(180 ');
|
||||
});
|
||||
|
||||
test('wrong case', () => {
|
||||
const component = renderer.create(
|
||||
<InlineIcon icon={iconData} vflip={true} />
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
const body = tree.props.dangerouslySetInnerHTML.__html;
|
||||
|
||||
expect(body).not.toMatch('scale(');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Alignment and slice', () => {
|
||||
test('vAlign and slice', () => {
|
||||
const component = renderer.create(
|
||||
<InlineIcon icon={iconData} vAlign="top" slice={true} />
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree.props.preserveAspectRatio).toStrictEqual('xMidYMin slice');
|
||||
});
|
||||
|
||||
test('string', () => {
|
||||
const component = renderer.create(
|
||||
<InlineIcon icon={iconData} align="left bottom" />
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree.props.preserveAspectRatio).toStrictEqual('xMinYMax meet');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Inline attribute', () => {
|
||||
test('string', () => {
|
||||
const component = renderer.create(
|
||||
<Icon icon={iconData} inline="true" />
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree.props.style.verticalAlign).toStrictEqual('-0.125em');
|
||||
});
|
||||
|
||||
test('false string', () => {
|
||||
// "false" = true
|
||||
const component = renderer.create(
|
||||
<Icon icon={iconData} inline="false" />
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree.props.style.verticalAlign).toStrictEqual('-0.125em');
|
||||
});
|
||||
});
|
||||
15
packages/react/tsconfig.json
Normal file
15
packages/react/tsconfig.json
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"outDir": "./lib",
|
||||
"target": "ES2019",
|
||||
"module": "ESNext",
|
||||
"declaration": true,
|
||||
"sourceMap": false,
|
||||
"strict": false,
|
||||
"moduleResolution": "node",
|
||||
"esModuleInterop": true,
|
||||
"importsNotUsedAsValues": "error",
|
||||
"forceConsistentCasingInFileNames": true
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user