agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2025-01-26 00:28:28 +00:00
Code Issues Releases Activity

Publish updates for Vue 2, Vue 3 and React components with addCollection support. Update dependencies

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2020-09-03 14:44:51 +03:00
parent 9e2e2d315e
commit c6148060aa
35 changed files with 1065 additions and 371 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
archive/vue2-demo/package-lock.json generated
View File

@ -1013,6 +1013,92 @@
"to-fast-properties": "^2.0.0"
}
},
"@eslint/eslintrc": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.1.3.tgz",
"integrity": "sha512-4YVwPkANLeNtRjMekzux1ci8hIaH5eGKktGqR0d3LWsKNn5B2X/1Z6Trxy7jQXl9EBGE6Yj02O+t09FMeRllaA==",
"dev": true,
"requires": {
"ajv": "^6.12.4",
"debug": "^4.1.1",
"espree": "^7.3.0",
"globals": "^12.1.0",
"ignore": "^4.0.6",
"import-fresh": "^3.2.1",
"js-yaml": "^3.13.1",
"lodash": "^4.17.19",
"minimatch": "^3.0.4",
"strip-json-comments": "^3.1.1"
},
"dependencies": {
"acorn": {
"version": "7.4.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.0.tgz",
"integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
"dev": true
},
"ajv": {
"version": "6.12.4",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz",
"integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==",
"dev": true,
"requires": {
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
}
},
"eslint-visitor-keys": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
"integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
"dev": true
},
"espree": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/espree/-/espree-7.3.0.tgz",
"integrity": "sha512-dksIWsvKCixn1yrEXO8UosNSxaDoSYpq9reEjZSbHLpT5hpaCAKTLBwq0RHtLrIr+c0ByiYzWT8KTMRzoRCNlw==",
"dev": true,
"requires": {
"acorn": "^7.4.0",
"acorn-jsx": "^5.2.0",
"eslint-visitor-keys": "^1.3.0"
}
},
"globals": {
"version": "12.4.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
"integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
"dev": true,
"requires": {
"type-fest": "^0.8.1"
}
},
"import-fresh": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
"integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
"dev": true,
"requires": {
"parent-module": "^1.0.0",
"resolve-from": "^4.0.0"
}
},
"resolve-from": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
"dev": true
},
"type-fest": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
"integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
"dev": true
}
}
},
"@hapi/address": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@ -1065,9 +1151,9 @@
"dev": true
},
"@iconify/vue": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-1.0.3.tgz",
"integrity": "sha512-EkEXaFRWN1t7xDuCgckSndVTjBbz2TJYBpYxANVEmwNxAAJXi+wTBlaX9QKgxoXLhUeJhCg6M9E2gwKyEHwJQw==",
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-1.0.5.tgz",
"integrity": "sha512-11O+nZJPr9OhjgtEFArR6xz++THkORAUbrSj6+3waRn+HR7375f8vyydHaFwHcPIrI0dzkpDyb+4Jd1L1JtSGQ==",
"dev": true
},
"@intervolga/optimize-cssnano-plugin": {
@ -1846,9 +1932,9 @@
}
},
"@vue/eslint-config-typescript": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-5.0.2.tgz",
"integrity": "sha512-GEZOHKOnelgQf5npA+6VNuhJZu9xEJaics3SYUyRjaSay+2SCpEINHhEpt6fXoNy/aIFt8CkDlt9CaEb+QPIcg==",
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-5.1.0.tgz",
"integrity": "sha512-wFAdPMWegKZOdbQBEWV4/KbOKuX/6Q5db3304kiWNBK+6P7+CoMrsbaKzJFjuAZF7fQR2fJtZT9ciGWVVT//vw==",
"dev": true,
"requires": {
"vue-eslint-parser": "^7.0.0"
@ -4697,12 +4783,13 @@
"dev": true
},
"eslint": {
"version": "7.7.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-7.7.0.tgz",
"integrity": "sha512-1KUxLzos0ZVsyL81PnRN335nDtQ8/vZUD6uMtWbF+5zDtjKcsklIi78XoE0MVL93QvWTu+E5y44VyyCsOMBrIg==",
"version": "7.8.1",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-7.8.1.tgz",
"integrity": "sha512-/2rX2pfhyUG0y+A123d0ccXtMm7DV7sH1m3lk9nk2DZ2LReq39FXHueR9xZwshE5MdfSf0xunSaMWRqyIA6M1w==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.0.0",
"@eslint/eslintrc": "^0.1.3",
"ajv": "^6.10.0",
"chalk": "^4.0.0",
"cross-spawn": "^7.0.2",
@ -4712,7 +4799,7 @@
"eslint-scope": "^5.1.0",
"eslint-utils": "^2.1.0",
"eslint-visitor-keys": "^1.3.0",
"espree": "^7.2.0",
"espree": "^7.3.0",
"esquery": "^1.2.0",
"esutils": "^2.0.2",
"file-entry-cache": "^5.0.1",
@ -4896,9 +4983,9 @@
"dev": true
},
"supports-color": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
"integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"requires": {
"has-flag": "^4.0.0"
@ -9436,9 +9523,9 @@
"dev": true
},
"prettier": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz",
"integrity": "sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==",
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.1.tgz",
"integrity": "sha512-9bY+5ZWCfqj3ghYBLxApy2zf6m+NJo5GzmLTpr9FsApsfjriNnS2dahWReHMi7qNPhhHl9SYHJs2cHZLgexNIw==",
"dev": true
},
"prettier-linter-helpers": {

8
archive/vue2-demo/package.json
View File

@ -15,7 +15,7 @@
"devDependencies": {
"@iconify-icons/bx": "^1.0.0",
"@iconify-icons/dashicons": "^1.0.0",
"@iconify/vue": "^1.0.3",
"@iconify/vue": "^1.0.5",
"@typescript-eslint/eslint-plugin": "^2.34.0",
"@typescript-eslint/parser": "^2.34.0",
"@vue/cli-plugin-babel": "~4.2.3",
@ -23,14 +23,14 @@
"@vue/cli-plugin-typescript": "~4.2.3",
"@vue/cli-service": "~4.2.3",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^5.0.2",
"@vue/eslint-config-typescript": "^5.1.0",
"babel-eslint": "^10.1.0",
"core-js": "^3.6.5",
"eslint": "^7.7.0",
"eslint": "^7.8.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^2.0.5",
"prettier": "^2.1.1",
"typescript": "^4.0.2",
"vue-template-compiler": "^2.6.12"
}

37
archive/vue2/README.md
View File

@ -5,7 +5,7 @@ Iconify for Vue 2 is not yet another icon component! There are many of them alre
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 60,000 icons.
- 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.
@ -26,16 +26,16 @@ Iconify for Vue features:
If you are using NPM:
```bash
npm install --save-dev @iconify/vue@1
npm install --save-dev @iconify/vue@^1
```
If you are using Yarn:
```bash
yarn add --dev @iconify/vue@1
yarn add --dev @iconify/vue@^1
```
If you are using Vue 2, it is important that you install `@iconify/vue@1`, not `@iconify/vue`, because `@iconify/vue` requires Vue 3.
If you are using Vue 2, it is important that you install `@iconify/vue@^1`, not `@iconify/vue`, because `@iconify/vue` requires Vue 3.
This package does not include icons. Icons are split into separate packages that available at NPM. See below.
@ -165,6 +165,33 @@ export default {
</script>
```
Instead of adding icons one by one using `addIcon` function, you can import an entire icon set using `addCollection` function:
```vue
<template>
<iconify-icon icon="jam:home" />
</template>
<script>
import IconifyIcon from '@iconify/vue';
// 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'
IconifyIcon.addCollection(jamIcons);
export default {
components: {
IconifyIcon,
},
};
</script>
```
Example above imports an entire icon set. To learn how to create smaller bundles, check out Iconify documentation: https://docs.iconify.design/sources/bundles/
## Component installation
You can install the icon component using `Vue.use()`, then you will no longer need to add it to every component that uses icons.
@ -188,7 +215,7 @@ After installing the icon component, you no longer need to list `IconifyIcon` in
## 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`, see instructions above) or an object containing the icon data.
`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:

98
archive/vue2/package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "@iconify/vue",
"version": "1.0.4",
"version": "1.0.5",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -602,9 +602,9 @@
"dev": true
},
"@iconify/core": {
"version": "1.0.0-beta.5",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-beta.5.tgz",
"integrity": "sha512-o7+pYUbrOfnFAzdnsB+KfNZa4PY/8x+BJwDMR7okiy9CiKVjq0X7qtEL08aFY6cpCX2rdxA0Ikeph/azZvjgZw==",
"version": "1.0.0-rc.1",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-rc.1.tgz",
"integrity": "sha512-fkDykGh4CwPPtIiS1WWfDVDZTwVVhJOAzVpUpcQel0NdQ95ndQTZwFHiTcy8GD0CgFRekFGyVy42h20qH72f0Q==",
"dev": true,
"requires": {
"@cyberalien/redundancy": "^1.0.0",
@ -1894,9 +1894,9 @@
"dev": true
},
"supports-color": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
"integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"requires": {
"has-flag": "^4.0.0"
@ -1905,15 +1905,15 @@
}
},
"@microsoft/api-extractor": {
"version": "7.9.10",
"resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.9.10.tgz",
"integrity": "sha512-hN/iyFN7FRM6flSDmeb2RJGGeo1CF7CONlsjxgoiXU3cqx8601vWheJK06s8+aR8IrBtnV12ZVMii8syQw6AgA==",
"version": "7.9.11",
"resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.9.11.tgz",
"integrity": "sha512-t+LwGAuTjr+odFEl5xV3vl7qOWf84CM8BWKgb93kEnVd8uha3KfuWtDfnstxG4oC/TL6tu5+9rOwKJiNIidf2A==",
"dev": true,
"requires": {
"@microsoft/api-extractor-model": "7.8.18",
"@microsoft/api-extractor-model": "7.8.19",
"@microsoft/tsdoc": "0.12.19",
"@rushstack/node-core-library": "3.29.1",
"@rushstack/ts-command-line": "4.6.3",
"@rushstack/node-core-library": "3.30.0",
"@rushstack/ts-command-line": "4.6.4",
"colors": "~1.2.1",
"lodash": "~4.17.15",
"resolve": "~1.17.0",
@ -1946,13 +1946,13 @@
}
},
"@microsoft/api-extractor-model": {
"version": "7.8.18",
"resolved": "https://registry.npmjs.org/@microsoft/api-extractor-model/-/api-extractor-model-7.8.18.tgz",
"integrity": "sha512-f/cotp4xvhhhpqAvnHd+M5xfaWIwokZfrezDcCEW4BFQMdjB7VhhXMA62Std/2E83B1YZ+/QsWoIZPaGuIcbBg==",
"version": "7.8.19",
"resolved": "https://registry.npmjs.org/@microsoft/api-extractor-model/-/api-extractor-model-7.8.19.tgz",
"integrity": "sha512-tEEPuww0Gbyw9LuTcJ7nDCTjb+aLSAox8Xl9/iSxNTv5yHJN1QX3cqajlC3ibDHlRz7oMpQfHZX7YpAygbgIvg==",
"dev": true,
"requires": {
"@microsoft/tsdoc": "0.12.19",
"@rushstack/node-core-library": "3.29.1"
"@rushstack/node-core-library": "3.30.0"
}
},
"@microsoft/tsdoc": {
@ -2034,9 +2034,9 @@
}
},
"@rushstack/node-core-library": {
"version": "3.29.1",
"resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-3.29.1.tgz",
"integrity": "sha512-EHPZOy6/6lc9e1rfvB46sSXXsyaGMMfjBthGsRBqjmLedwUd6pFounlTtrGolugmW7DjRgs7wwvfYbsBcOW/vQ==",
"version": "3.30.0",
"resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-3.30.0.tgz",
"integrity": "sha512-vZo1fi/ObL3CmRXlQUX/E1xL9KL9arBfCJ7pYf3O/vFrD8ffSfpQ6+6lhgAsKrCIM5Epddsgeb2REPxMwYZX1g==",
"dev": true,
"requires": {
"@types/node": "10.17.13",
@ -2044,11 +2044,21 @@
"fs-extra": "~7.0.1",
"import-lazy": "~4.0.0",
"jju": "~1.4.0",
"resolve": "~1.17.0",
"semver": "~7.3.0",
"timsort": "~0.3.0",
"z-schema": "~3.18.3"
},
"dependencies": {
"resolve": {
"version": "1.17.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
"integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
"dev": true,
"requires": {
"path-parse": "^1.0.6"
}
},
"semver": {
"version": "7.3.2",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
@ -2058,9 +2068,9 @@
}
},
"@rushstack/ts-command-line": {
"version": "4.6.3",
"resolved": "https://registry.npmjs.org/@rushstack/ts-command-line/-/ts-command-line-4.6.3.tgz",
"integrity": "sha512-mSkUDnc88kxiC9dKDVCNm1d08Ih918vSpLZGi1XHy/gYiQy4JcEW/O4MlqGAY9vNRigtm0dg4iJTiae+FTIxfA==",
"version": "4.6.4",
"resolved": "https://registry.npmjs.org/@rushstack/ts-command-line/-/ts-command-line-4.6.4.tgz",
"integrity": "sha512-ubIANZimyU07+ChU56LfiD36NJ8gvw1txlvUP20GYNQi4lf5N0xEnev4r+AtKkOdnowpGy60ObGmYxSUpSacpw==",
"dev": true,
"requires": {
"@types/argparse": "1.0.38",
@ -2190,9 +2200,9 @@
}
},
"@types/jest": {
"version": "26.0.10",
"resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.10.tgz",
"integrity": "sha512-i2m0oyh8w/Lum7wWK/YOZJakYF8Mx08UaKA1CtbmFeDquVhAEdA7znacsVSf2hJ1OQ/OfVMGN90pw/AtzF8s/Q==",
"version": "26.0.13",
"resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.13.tgz",
"integrity": "sha512-sCzjKow4z9LILc6DhBvn5AkIfmQzDZkgtVVKmGwVrs5tuid38ws281D4l+7x1kP487+FlKDh5kfMZ8WSPAdmdA==",
"dev": true,
"requires": {
"jest-diff": "^25.2.1",
@ -2260,9 +2270,9 @@
"dev": true
},
"@vue/test-utils": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.0.4.tgz",
"integrity": "sha512-uIdDqFauzNJWlhltLSZU+P3uHEgUQczklSv2b1EKC7JzxBg9OY/5sx8UyuJwBD+zuxidhFZ4SjTuPgr8cdf63w==",
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.0.5.tgz",
"integrity": "sha512-P2x8kXwqfTXesAdfJQN146V1S3QD3Xv9wYZ1B09Oecmg7I3Fpqqo1CwfIn5ivwuXyBPQWFDH4vyBHynnYjIkRg==",
"dev": true,
"requires": {
"dom-event-types": "^1.0.0",
@ -5609,9 +5619,9 @@
"dev": true
},
"supports-color": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
"integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"requires": {
"has-flag": "^4.0.0"
@ -9053,18 +9063,18 @@
}
},
"rollup": {
"version": "2.26.5",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.5.tgz",
"integrity": "sha512-rCyFG3ZtQdnn9YwfuAVH0l/Om34BdO5lwCA0W6Hq+bNB21dVEBbCRxhaHOmu1G7OBFDWytbzAC104u7rxHwGjA==",
"version": "2.26.9",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.9.tgz",
"integrity": "sha512-XIiWYLayLqV+oY4S2Lub/shJq4uk/QQLwWToYCL4LjZbYHbFK3czea4UDVRUJu+zNmKmxq5Zb/OG7c5HSvH2TQ==",
"dev": true,
"requires": {
"fsevents": "~2.1.2"
}
},
"rollup-plugin-terser": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.0.tgz",
"integrity": "sha512-p/N3lLiFusCjYTLfVkoaiRTOGr5AESEaljMPH12MhOtoMkmTBhIAfuadrcWy4am1U0vU4WTxO9fi0K09O4CboQ==",
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.1.tgz",
"integrity": "sha512-HL0dgzSxBYG/Ly9i/E5Sc+PuKKZ0zBzk11VmLCfdUtpqH4yYqkLclPkTqRy85FU9246yetImOClaQ/ufnj08vg==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.10.4",
@ -9117,9 +9127,9 @@
}
},
"supports-color": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
"integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"requires": {
"has-flag": "^4.0.0"
@ -9815,9 +9825,9 @@
}
},
"terser": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.0.0.tgz",
"integrity": "sha512-olH2DwGINoSuEpSGd+BsPuAQaA3OrHnHnFL/rDB2TVNc3srUbz/rq/j2BlF4zDXI+JqAvGr86bIm1R2cJgZ3FA==",
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.2.1.tgz",
"integrity": "sha512-/AOtjRtAMNGO0fIF6m8HfcvXTw/2AKpsOzDn36tA5RfhRdeXyb4RvHxJ5Pah7iL6dFkLk+gOnCaNHGwJPl6TrQ==",
"dev": true,
"requires": {
"commander": "^2.20.0",

16
archive/vue2/package.json
View File

@ -1,8 +1,8 @@
{
"name": "@iconify/vue",
"description": "Iconify icon component for Vue.",
"description": "Iconify icon component for Vue 2.",
"author": "Vjacheslav Trushkin",
"version": "1.0.4",
"version": "1.0.5",
"license": "MIT",
"bugs": "https://github.com/iconify/iconify/issues",
"homepage": "https://iconify.design/",
@ -26,20 +26,20 @@
"vue": "^2.0.0"
},
"devDependencies": {
"@iconify/core": "^1.0.0-beta.5",
"@iconify/core": "^1.0.0-rc.1",
"@iconify/types": "^1.0.3",
"@microsoft/api-extractor": "^7.9.10",
"@microsoft/api-extractor": "^7.9.11",
"@rollup/plugin-buble": "^0.21.3",
"@rollup/plugin-commonjs": "^11.1.0",
"@rollup/plugin-node-resolve": "^7.1.3",
"@types/jest": "^26.0.10",
"@vue/test-utils": "^1.0.4",
"@types/jest": "^26.0.13",
"@vue/test-utils": "^1.0.5",
"babel-eslint": "^10.1.0",
"babel-jest": "^25.5.1",
"babel-preset-env": "^1.7.0",
"jest": "^26.4.2",
"rollup": "^2.26.5",
"rollup-plugin-terser": "^7.0.0",
"rollup": "^2.26.9",
"rollup-plugin-terser": "^7.0.1",
"typescript": "^4.0.2",
"vue": "^2.6.12",
"vue-jest": "^3.0.6",

24
archive/vue2/src/IconifyIcon.ts
View File

@ -1,7 +1,7 @@
import _Vue, { PluginFunction, VueConstructor, VNode, VNodeData } from 'vue';
import { FunctionalRenderContext } from 'vue/src/core';
import { IconifyIcon as IconifyIconData } from '@iconify/types';
import { IconifyIcon as IconifyIconData, IconifyJSON } from '@iconify/types';
import {
IconifyIconCustomisations as IconCustomisations,
FullIconCustomisations,
@ -19,12 +19,14 @@ import { fullIcon } from '@iconify/core/lib/icon';
import { iconToSVG } from '@iconify/core/lib/builder';
import { replaceIDs } from '@iconify/core/lib/builder/ids';
import { merge } from '@iconify/core/lib/misc/merge';
import { parseIconSet } from '@iconify/core/lib/icon/icon-set';
/**
* Export types that could be used in component
*/
export {
IconifyIconData,
IconifyJSON,
IconifyHorizontalIconAlignment,
IconifyVerticalIconAlignment,
IconifyIconSize,
@ -278,6 +280,26 @@ const IconifyIcon = {
addIcon: (name: string, data: IconifyIconData) => {
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.
*/
addCollection: (data: IconifyJSON, prefix?: string | boolean) => {
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;
}
});
},
};
// Install function

72
archive/vue2/tests/icon.test.js
View File

@ -92,6 +92,78 @@ describe('Rendering icon', () => {
);
});
test('as string 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,
};
IconifyIcon.addCollection(iconSet);
const Wrapper = {
components: { IconifyIcon },
template: `<iconify-icon icon='mdi-light:home' />`,
};
const wrapper = mount(Wrapper, {});
const item = wrapper.findComponent(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
spacing(1) +
'<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"></path>' +
spacing(0) +
'</svg>'
);
});
test('as string 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,
};
IconifyIcon.addCollection(iconSet, 'custom-');
const Wrapper = {
components: { IconifyIcon },
template: `<iconify-icon icon='custom-link' />`,
};
const wrapper = mount(Wrapper, {});
const item = wrapper.findComponent(IconifyIcon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
spacing(1) +
'<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"></path>' +
spacing(0) +
'</svg>'
);
});
test('replacing id', () => {
const Wrapper = {
components: { IconifyIcon },

12
packages/browser-tests/package-lock.json generated
View File

@ -11,9 +11,9 @@
"dev": true
},
"@iconify/core": {
"version": "1.0.0-beta.5",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-beta.5.tgz",
"integrity": "sha512-o7+pYUbrOfnFAzdnsB+KfNZa4PY/8x+BJwDMR7okiy9CiKVjq0X7qtEL08aFY6cpCX2rdxA0Ikeph/azZvjgZw==",
"version": "1.0.0-rc.1",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-rc.1.tgz",
"integrity": "sha512-fkDykGh4CwPPtIiS1WWfDVDZTwVVhJOAzVpUpcQel0NdQ95ndQTZwFHiTcy8GD0CgFRekFGyVy42h20qH72f0Q==",
"dev": true,
"requires": {
"@cyberalien/redundancy": "^1.0.0",
@ -1188,9 +1188,9 @@
}
},
"rollup": {
"version": "2.26.8",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.8.tgz",
"integrity": "sha512-li9WaJYc5z9WzV1jhZbPQCrsOpGNsI+Li1qyrn5n745ZNSnlkRlBtj1Hs+Z0Dc2N1+P7HT34UKAEASqN9Th8cg==",
"version": "2.26.9",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.9.tgz",
"integrity": "sha512-XIiWYLayLqV+oY4S2Lub/shJq4uk/QQLwWToYCL4LjZbYHbFK3czea4UDVRUJu+zNmKmxq5Zb/OG7c5HSvH2TQ==",
"dev": true,
"requires": {
"fsevents": "~2.1.2"

4
packages/browser-tests/package.json
View File

@ -19,7 +19,7 @@
},
"devDependencies": {
"@cyberalien/redundancy": "^1.0.0",
"@iconify/core": "^1.0.0-beta.5",
"@iconify/core": "^1.0.0-rc.1",
"@iconify/iconify": "^2.0.0-rc.1",
"@iconify/types": "^1.0.3",
"@rollup/plugin-buble": "^0.21.3",
@ -29,7 +29,7 @@
"@types/mocha": "^8.0.3",
"chai": "^4.2.0",
"mocha": "^8.1.3",
"rollup": "^2.26.8",
"rollup": "^2.26.9",
"typescript": "^4.0.2"
},
"dependencies": {}

12
packages/iconify/package-lock.json generated
View File

@ -37,9 +37,9 @@
"dev": true
},
"@iconify/core": {
"version": "1.0.0-beta.5",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-beta.5.tgz",
"integrity": "sha512-o7+pYUbrOfnFAzdnsB+KfNZa4PY/8x+BJwDMR7okiy9CiKVjq0X7qtEL08aFY6cpCX2rdxA0Ikeph/azZvjgZw==",
"version": "1.0.0-rc.1",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-rc.1.tgz",
"integrity": "sha512-fkDykGh4CwPPtIiS1WWfDVDZTwVVhJOAzVpUpcQel0NdQ95ndQTZwFHiTcy8GD0CgFRekFGyVy42h20qH72f0Q==",
"dev": true,
"requires": {
"@cyberalien/redundancy": "^1.0.0",
@ -693,9 +693,9 @@
}
},
"rollup": {
"version": "2.26.8",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.8.tgz",
"integrity": "sha512-li9WaJYc5z9WzV1jhZbPQCrsOpGNsI+Li1qyrn5n745ZNSnlkRlBtj1Hs+Z0Dc2N1+P7HT34UKAEASqN9Th8cg==",
"version": "2.26.9",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.9.tgz",
"integrity": "sha512-XIiWYLayLqV+oY4S2Lub/shJq4uk/QQLwWToYCL4LjZbYHbFK3czea4UDVRUJu+zNmKmxq5Zb/OG7c5HSvH2TQ==",
"dev": true,
"requires": {
"fsevents": "~2.1.2"

4
packages/iconify/package.json
View File

@ -24,14 +24,14 @@
},
"devDependencies": {
"@cyberalien/redundancy": "^1.0.0",
"@iconify/core": "^1.0.0-beta.5",
"@iconify/core": "^1.0.0-rc.1",
"@iconify/types": "^1.0.3",
"@microsoft/api-extractor": "^7.9.11",
"@rollup/plugin-buble": "^0.21.3",
"@rollup/plugin-commonjs": "^15.0.0",
"@rollup/plugin-node-resolve": "^9.0.0",
"@rollup/plugin-replace": "^2.3.3",
"rollup": "^2.26.8",
"rollup": "^2.26.9",
"rollup-plugin-terser": "^7.0.1",
"typescript": "^4.0.2"
}

6
packages/react-demo/package-lock.json generated
View File

@ -1208,9 +1208,9 @@
"dev": true
},
"@iconify/react": {
"version": "2.0.0-beta.3",
"resolved": "https://registry.npmjs.org/@iconify/react/-/react-2.0.0-beta.3.tgz",
"integrity": "sha512-3IP49wBzURdUPDnXqlcIiy2/pkgsxRUK77/igxNrIa072x6PSCFt6+iECTfru1pUuSdmqwmc/8qo4jIyUUkoLA==",
"version": "2.0.0-rc.1",
"resolved": "https://registry.npmjs.org/@iconify/react/-/react-2.0.0-rc.1.tgz",
"integrity": "sha512-756JuicSY3GhwUxEVKbntTtVzBB/Bge54nnd3OTdhIn9kzsuTCW0vvnvS/X6UEUCYG4oP71dnLL9QRNugV7QdQ==",
"dev": true
},
"@jest/console": {

2
packages/react-demo/package.json
View File

@ -30,6 +30,6 @@
"devDependencies": {
"@iconify-icons/mdi-light": "^1.0.0",
"@iconify-icons/uil": "^1.0.0",
"@iconify/react": "^2.0.0-beta.3"
"@iconify/react": "^2.0.0-rc.1"
}
}

24
packages/react-demo/src/App.js vendored
View File

@ -1,5 +1,5 @@
import React from 'react';
import { Icon, InlineIcon, addIcon } from '@iconify/react';
import { Icon, InlineIcon, addIcon, addCollection } from '@iconify/react';
import accountIcon from '@iconify-icons/mdi-light/account';
import alertIcon from '@iconify-icons/mdi-light/alert';
import homeIcon from '@iconify-icons/mdi-light/home';
@ -23,6 +23,23 @@ addIcon('experiment2', {
'<circle fill-opacity="0.2" cx="8" cy="8" r="7" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15Z" fill="currentColor"/><path d="M7 9L5 7L3.5 8.5L7 12L13 6L11.5 4.5L7 9Z" fill="currentColor"/>',
});
// Add few mdi-light: icons
addCollection({
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,
});
class CheckboxIcon extends React.Component {
constructor(props) {
super();
@ -67,6 +84,11 @@ function App() {
<div>
Icon referenced by object: <Icon icon={accountIcon} />
</div>
<div>
2 icons imported from icon set:{' '}
<Icon icon="mdi-light:account-alert" />
<Icon icon="mdi-light:link" />
</div>
<div className="alert">
<Icon icon={alertIcon} />
Important notice with alert icon!

170
packages/react-with-api/package-lock.json generated
View File

@ -25,19 +25,19 @@
}
},
"@babel/core": {
"version": "7.11.4",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.11.4.tgz",
"integrity": "sha512-5deljj5HlqRXN+5oJTY7Zs37iH3z3b++KjiKtIsJy1NrjOOVSEaJHEetLBhyu0aQOSNNZ/0IuEAan9GzRuDXHg==",
"version": "7.11.5",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.11.5.tgz",
"integrity": "sha512-fsEANVOcZHzrsV6dMVWqpSeXClq3lNbYrfFGme6DE25FQWe7pyeYpXyx9guqUnpy466JLzZ8z4uwSr2iv60V5Q==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.10.4",
"@babel/generator": "^7.11.4",
"@babel/generator": "^7.11.5",
"@babel/helper-module-transforms": "^7.11.0",
"@babel/helpers": "^7.10.4",
"@babel/parser": "^7.11.4",
"@babel/parser": "^7.11.5",
"@babel/template": "^7.10.4",
"@babel/traverse": "^7.11.0",
"@babel/types": "^7.11.0",
"@babel/traverse": "^7.11.5",
"@babel/types": "^7.11.5",
"convert-source-map": "^1.7.0",
"debug": "^4.1.0",
"gensync": "^1.0.0-beta.1",
@ -45,18 +45,44 @@
"lodash": "^4.17.19",
"resolve": "^1.3.2",
"semver": "^5.4.1",
"source-map": "^0.5.0"
"source-map": "^0.6.1"
},
"dependencies": {
"@babel/types": {
"version": "7.11.5",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
"integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
"dev": true,
"requires": {
"@babel/helper-validator-identifier": "^7.10.4",
"lodash": "^4.17.19",
"to-fast-properties": "^2.0.0"
}
}
}
},
"@babel/generator": {
"version": "7.11.4",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.4.tgz",
"integrity": "sha512-Rn26vueFx0eOoz7iifCN2UHT6rGtnkSGWSoDRIy8jZN3B91PzeSULbswfLoOWuTuAcNwpG/mxy+uCTDnZ9Mp1g==",
"version": "7.11.5",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.5.tgz",
"integrity": "sha512-9UqHWJ4IwRTy4l0o8gq2ef8ws8UPzvtMkVKjTLAiRmza9p9V6Z+OfuNd9fB1j5Q67F+dVJtPC2sZXI8NM9br4g==",
"dev": true,
"requires": {
"@babel/types": "^7.11.0",
"@babel/types": "^7.11.5",
"jsesc": "^2.5.1",
"source-map": "^0.5.0"
"source-map": "^0.6.1"
},
"dependencies": {
"@babel/types": {
"version": "7.11.5",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
"integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
"dev": true,
"requires": {
"@babel/helper-validator-identifier": "^7.10.4",
"lodash": "^4.17.19",
"to-fast-properties": "^2.0.0"
}
}
}
},
"@babel/helper-annotate-as-pure": {
@ -336,9 +362,9 @@
}
},
"@babel/parser": {
"version": "7.11.4",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.4.tgz",
"integrity": "sha512-MggwidiH+E9j5Sh8pbrX5sJvMcsqS5o+7iB42M9/k0CD63MjYbdP4nhSh7uB5wnv2/RVzTZFTxzF/kIa5mrCqA==",
"version": "7.11.5",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.5.tgz",
"integrity": "sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==",
"dev": true
},
"@babel/plugin-proposal-async-generator-functions": {
@ -969,9 +995,9 @@
}
},
"@babel/preset-env": {
"version": "7.11.0",
"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.11.0.tgz",
"integrity": "sha512-2u1/k7rG/gTh02dylX2kL3S0IJNF+J6bfDSp4DI2Ma8QN6Y9x9pmAax59fsCk6QUQG0yqH47yJWA+u1I1LccAg==",
"version": "7.11.5",
"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.11.5.tgz",
"integrity": "sha512-kXqmW1jVcnB2cdueV+fyBM8estd5mlNfaQi6lwLgRwCby4edpavgbFhiBNjmWA3JpB/yZGSISa7Srf+TwxDQoA==",
"dev": true,
"requires": {
"@babel/compat-data": "^7.11.0",
@ -1036,12 +1062,25 @@
"@babel/plugin-transform-unicode-escapes": "^7.10.4",
"@babel/plugin-transform-unicode-regex": "^7.10.4",
"@babel/preset-modules": "^0.1.3",
"@babel/types": "^7.11.0",
"@babel/types": "^7.11.5",
"browserslist": "^4.12.0",
"core-js-compat": "^3.6.2",
"invariant": "^2.2.2",
"levenary": "^1.1.1",
"semver": "^5.5.0"
},
"dependencies": {
"@babel/types": {
"version": "7.11.5",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
"integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
"dev": true,
"requires": {
"@babel/helper-validator-identifier": "^7.10.4",
"lodash": "^4.17.19",
"to-fast-properties": "^2.0.0"
}
}
}
},
"@babel/preset-modules": {
@ -1093,20 +1132,33 @@
}
},
"@babel/traverse": {
"version": "7.11.0",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.0.tgz",
"integrity": "sha512-ZB2V+LskoWKNpMq6E5UUCrjtDUh5IOTAyIl0dTjIEoXum/iKWkoIEKIRDnUucO6f+2FzNkE0oD4RLKoPIufDtg==",
"version": "7.11.5",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.5.tgz",
"integrity": "sha512-EjiPXt+r7LiCZXEfRpSJd+jUMnBd4/9OUv7Nx3+0u9+eimMwJmG0Q98lw4/289JCoxSE8OolDMNZaaF/JZ69WQ==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.10.4",
"@babel/generator": "^7.11.0",
"@babel/generator": "^7.11.5",
"@babel/helper-function-name": "^7.10.4",
"@babel/helper-split-export-declaration": "^7.11.0",
"@babel/parser": "^7.11.0",
"@babel/types": "^7.11.0",
"@babel/parser": "^7.11.5",
"@babel/types": "^7.11.5",
"debug": "^4.1.0",
"globals": "^11.1.0",
"lodash": "^4.17.19"
},
"dependencies": {
"@babel/types": {
"version": "7.11.5",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
"integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
"dev": true,
"requires": {
"@babel/helper-validator-identifier": "^7.10.4",
"lodash": "^4.17.19",
"to-fast-properties": "^2.0.0"
}
}
}
},
"@babel/types": {
@ -1127,9 +1179,9 @@
"dev": true
},
"@iconify/core": {
"version": "1.0.0-beta.5",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-beta.5.tgz",
"integrity": "sha512-o7+pYUbrOfnFAzdnsB+KfNZa4PY/8x+BJwDMR7okiy9CiKVjq0X7qtEL08aFY6cpCX2rdxA0Ikeph/azZvjgZw==",
"version": "1.0.0-rc.1",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-rc.1.tgz",
"integrity": "sha512-fkDykGh4CwPPtIiS1WWfDVDZTwVVhJOAzVpUpcQel0NdQ95ndQTZwFHiTcy8GD0CgFRekFGyVy42h20qH72f0Q==",
"dev": true,
"requires": {
"@cyberalien/redundancy": "^1.0.0",
@ -1137,16 +1189,10 @@
"axios": "^0.19.2"
}
},
"@iconify/iconify": {
"version": "2.0.0-rc.1",
"resolved": "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.0.0-rc.1.tgz",
"integrity": "sha512-ji5H04VjYtR4seIEgVVLPxg1KRhrFquOiyfPyLVS6vYPkuqV6bcWdssi05YSmf/OAzG4E7Qsg80/bOKyd5tYTw==",
"dev": true
},
"@iconify/react": {
"version": "2.0.0-beta.3",
"resolved": "https://registry.npmjs.org/@iconify/react/-/react-2.0.0-beta.3.tgz",
"integrity": "sha512-3IP49wBzURdUPDnXqlcIiy2/pkgsxRUK77/igxNrIa072x6PSCFt6+iECTfru1pUuSdmqwmc/8qo4jIyUUkoLA==",
"version": "2.0.0-rc.1",
"resolved": "https://registry.npmjs.org/@iconify/react/-/react-2.0.0-rc.1.tgz",
"integrity": "sha512-756JuicSY3GhwUxEVKbntTtVzBB/Bge54nnd3OTdhIn9kzsuTCW0vvnvS/X6UEUCYG4oP71dnLL9QRNugV7QdQ==",
"dev": true
},
"@iconify/types": {
@ -1484,9 +1530,9 @@
"dev": true
},
"caniuse-lite": {
"version": "1.0.30001120",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001120.tgz",
"integrity": "sha512-JBP68okZs1X8D7MQTY602jxMYBmXEKOFkzTBaNSkubooMPFOAv2TXWaKle7qgHpjLDhUzA/TMT0qsNleVyXGUQ==",
"version": "1.0.30001123",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001123.tgz",
"integrity": "sha512-03dJDoa4YC4332jq0rqwiM+Hw6tA5RJtrnZKvOQy7ASoIUv8CinkcmGhYpCvCjedvkBQrrKnkcELxrUSW/XwNQ==",
"dev": true
},
"chalk": {
@ -1579,14 +1625,6 @@
"dev": true,
"requires": {
"ms": "^2.1.1"
},
"dependencies": {
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"dev": true
}
}
},
"deepmerge": {
@ -1605,9 +1643,9 @@
}
},
"electron-to-chromium": {
"version": "1.3.555",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.555.tgz",
"integrity": "sha512-/55x3nF2feXFZ5tdGUOr00TxnUjUgdxhrn+eCJ1FAcoAt+cKQTjQkUC5XF4frMWE1R5sjHk+JueuBalimfe5Pg==",
"version": "1.3.560",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.560.tgz",
"integrity": "sha512-0cEFfOA3sNXfSxo0FIClBhrLVSe/QO9LBiqmmYPm3N/IYyt41NRTa2EhvOMWAOKpjd91t/rq062yhnJzfVMKkQ==",
"dev": true
},
"escalade": {
@ -1653,6 +1691,13 @@
"requires": {
"ms": "2.0.0"
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"dev": true,
"optional": true
}
}
},
@ -1913,11 +1958,10 @@
"dev": true
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"dev": true,
"optional": true
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"dev": true
},
"node-releases": {
"version": "1.1.60",
@ -2090,9 +2134,9 @@
}
},
"rollup": {
"version": "2.26.8",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.8.tgz",
"integrity": "sha512-li9WaJYc5z9WzV1jhZbPQCrsOpGNsI+Li1qyrn5n745ZNSnlkRlBtj1Hs+Z0Dc2N1+P7HT34UKAEASqN9Th8cg==",
"version": "2.26.9",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.9.tgz",
"integrity": "sha512-XIiWYLayLqV+oY4S2Lub/shJq4uk/QQLwWToYCL4LjZbYHbFK3czea4UDVRUJu+zNmKmxq5Zb/OG7c5HSvH2TQ==",
"dev": true,
"requires": {
"fsevents": "~2.1.2"
@ -2132,9 +2176,9 @@
}
},
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
},
"source-map-support": {

11
packages/react-with-api/package.json
View File

@ -24,13 +24,12 @@
"react": "^16.0.0"
},
"devDependencies": {
"@babel/core": "^7.11.4",
"@babel/preset-env": "^7.11.0",
"@babel/core": "^7.11.5",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"@cyberalien/redundancy": "^1.0.0",
"@iconify/core": "^1.0.0-beta.5",
"@iconify/iconify": "^2.0.0-rc.1",
"@iconify/react": "^2.0.0-beta.3",
"@iconify/core": "^1.0.0-rc.1",
"@iconify/react": "^2.0.0-rc.1",
"@iconify/types": "^1.0.3",
"@microsoft/api-extractor": "^7.9.11",
"@rollup/plugin-buble": "^0.21.3",
@ -38,7 +37,7 @@
"@rollup/plugin-node-resolve": "^9.0.0",
"@types/react": "^16.9.49",
"react": "^16.13.1",
"rollup": "^2.26.8",
"rollup": "^2.26.9",
"rollup-plugin-terser": "^7.0.1",
"typescript": "^4.0.2"
}

47
packages/react/package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "@iconify/react",
"version": "2.0.0-beta.3",
"version": "2.0.0-rc.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -987,9 +987,9 @@
}
},
"@babel/preset-env": {
"version": "7.11.0",
"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.11.0.tgz",
"integrity": "sha512-2u1/k7rG/gTh02dylX2kL3S0IJNF+J6bfDSp4DI2Ma8QN6Y9x9pmAax59fsCk6QUQG0yqH47yJWA+u1I1LccAg==",
"version": "7.11.5",
"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.11.5.tgz",
"integrity": "sha512-kXqmW1jVcnB2cdueV+fyBM8estd5mlNfaQi6lwLgRwCby4edpavgbFhiBNjmWA3JpB/yZGSISa7Srf+TwxDQoA==",
"dev": true,
"requires": {
"@babel/compat-data": "^7.11.0",
@ -1054,12 +1054,25 @@
"@babel/plugin-transform-unicode-escapes": "^7.10.4",
"@babel/plugin-transform-unicode-regex": "^7.10.4",
"@babel/preset-modules": "^0.1.3",
"@babel/types": "^7.11.0",
"@babel/types": "^7.11.5",
"browserslist": "^4.12.0",
"core-js-compat": "^3.6.2",
"invariant": "^2.2.2",
"levenary": "^1.1.1",
"semver": "^5.5.0"
},
"dependencies": {
"@babel/types": {
"version": "7.11.5",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
"integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
"dev": true,
"requires": {
"@babel/helper-validator-identifier": "^7.10.4",
"lodash": "^4.17.19",
"to-fast-properties": "^2.0.0"
}
}
}
},
"@babel/preset-modules": {
@ -1161,9 +1174,9 @@
"dev": true
},
"@iconify/core": {
"version": "1.0.0-beta.5",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-beta.5.tgz",
"integrity": "sha512-o7+pYUbrOfnFAzdnsB+KfNZa4PY/8x+BJwDMR7okiy9CiKVjq0X7qtEL08aFY6cpCX2rdxA0Ikeph/azZvjgZw==",
"version": "1.0.0-rc.1",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-rc.1.tgz",
"integrity": "sha512-fkDykGh4CwPPtIiS1WWfDVDZTwVVhJOAzVpUpcQel0NdQ95ndQTZwFHiTcy8GD0CgFRekFGyVy42h20qH72f0Q==",
"dev": true,
"requires": {
"@cyberalien/redundancy": "^1.0.0",
@ -2511,9 +2524,9 @@
"dev": true
},
"caniuse-lite": {
"version": "1.0.30001120",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001120.tgz",
"integrity": "sha512-JBP68okZs1X8D7MQTY602jxMYBmXEKOFkzTBaNSkubooMPFOAv2TXWaKle7qgHpjLDhUzA/TMT0qsNleVyXGUQ==",
"version": "1.0.30001123",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001123.tgz",
"integrity": "sha512-03dJDoa4YC4332jq0rqwiM+Hw6tA5RJtrnZKvOQy7ASoIUv8CinkcmGhYpCvCjedvkBQrrKnkcELxrUSW/XwNQ==",
"dev": true
},
"capture-exit": {
@ -2900,9 +2913,9 @@
}
},
"electron-to-chromium": {
"version": "1.3.555",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.555.tgz",
"integrity": "sha512-/55x3nF2feXFZ5tdGUOr00TxnUjUgdxhrn+eCJ1FAcoAt+cKQTjQkUC5XF4frMWE1R5sjHk+JueuBalimfe5Pg==",
"version": "1.3.560",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.560.tgz",
"integrity": "sha512-0cEFfOA3sNXfSxo0FIClBhrLVSe/QO9LBiqmmYPm3N/IYyt41NRTa2EhvOMWAOKpjd91t/rq062yhnJzfVMKkQ==",
"dev": true
},
"emittery": {
@ -6225,9 +6238,9 @@
}
},
"rollup": {
"version": "2.26.8",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.8.tgz",
"integrity": "sha512-li9WaJYc5z9WzV1jhZbPQCrsOpGNsI+Li1qyrn5n745ZNSnlkRlBtj1Hs+Z0Dc2N1+P7HT34UKAEASqN9Th8cg==",
"version": "2.26.9",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.9.tgz",
"integrity": "sha512-XIiWYLayLqV+oY4S2Lub/shJq4uk/QQLwWToYCL4LjZbYHbFK3czea4UDVRUJu+zNmKmxq5Zb/OG7c5HSvH2TQ==",
"dev": true,
"requires": {
"fsevents": "~2.1.2"

8
packages/react/package.json
View File

@ -2,7 +2,7 @@
"name": "@iconify/react",
"description": "Iconify icon component for React.",
"author": "Vjacheslav Trushkin",
"version": "2.0.0-beta.3",
"version": "2.0.0-rc.1",
"license": "MIT",
"bugs": "https://github.com/iconify/iconify/issues",
"homepage": "https://iconify.design/",
@ -26,9 +26,9 @@
"react": "^16.0.0"
},
"devDependencies": {
"@babel/preset-env": "^7.11.0",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"@iconify/core": "^1.0.0-beta.5",
"@iconify/core": "^1.0.0-rc.1",
"@iconify/types": "^1.0.3",
"@microsoft/api-extractor": "^7.9.11",
"@rollup/plugin-buble": "^0.21.3",
@ -39,7 +39,7 @@
"jest": "^26.4.2",
"react": "^16.13.1",
"react-test-renderer": "^16.13.1",
"rollup": "^2.26.8",
"rollup": "^2.26.9",
"rollup-plugin-terser": "^7.0.1",
"typescript": "^4.0.2"
}

31
packages/react/readme.md
View File

@ -62,7 +62,7 @@ With this method the icon needs to be added only once. That means if you have mu
```jsx
import React from 'react';
import { Icon, InlineIcon, addIcon } from '@iconify/react';
import { Icon, addIcon } from '@iconify/react';
import homeIcon from '@iconify-icons/mdi-light/home';
addIcon('home', homeIcon);
@ -76,6 +76,33 @@ export function MyComponent() {
}
```
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/
## Icon and InlineIcon
Both components are the same, the only difference is `InlineIcon` has a negative vertical alignment, so it behaves like a glyph.
@ -88,7 +115,7 @@ 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`, see instructions above) or an object containing the icon data.
`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:

27
packages/react/src/icon.ts
View File

@ -1,5 +1,5 @@
import { HTMLProps, SVGProps, createElement } from 'react';
import { IconifyIcon } from '@iconify/types';
import { IconifyIcon, IconifyJSON } from '@iconify/types';
import {
IconifyIconCustomisations as IconCustomisations,
FullIconCustomisations,
@ -17,12 +17,14 @@ import { fullIcon } from '@iconify/core/lib/icon';
import { iconToSVG } from '@iconify/core/lib/builder';
import { replaceIDs } from '@iconify/core/lib/builder/ids';
import { merge } from '@iconify/core/lib/misc/merge';
import { parseIconSet } from '@iconify/core/lib/icon/icon-set';
/**
* Export types that could be used in component
*/
export {
IconifyIcon,
IconifyJSON,
IconifyHorizontalIconAlignment,
IconifyVerticalIconAlignment,
IconifyIconSize,
@ -204,3 +206,26 @@ export const InlineIcon = (props: IconProps) =>
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;
}
});
}

86
packages/react/tests/icon.test.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { Icon, InlineIcon, addIcon } from '../';
import { Icon, InlineIcon, addIcon, addCollection } from '../';
import renderer from 'react-test-renderer';
const iconData = {
@ -95,6 +95,90 @@ describe('Creating component', () => {
});
});
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,
'focusable': false,
'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,
'focusable': false,
'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();

136
packages/sapper-demo/package-lock.json generated
View File

@ -30,19 +30,19 @@
}
},
"@babel/core": {
"version": "7.11.4",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.11.4.tgz",
"integrity": "sha512-5deljj5HlqRXN+5oJTY7Zs37iH3z3b++KjiKtIsJy1NrjOOVSEaJHEetLBhyu0aQOSNNZ/0IuEAan9GzRuDXHg==",
"version": "7.11.5",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.11.5.tgz",
"integrity": "sha512-fsEANVOcZHzrsV6dMVWqpSeXClq3lNbYrfFGme6DE25FQWe7pyeYpXyx9guqUnpy466JLzZ8z4uwSr2iv60V5Q==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.10.4",
"@babel/generator": "^7.11.4",
"@babel/generator": "^7.11.5",
"@babel/helper-module-transforms": "^7.11.0",
"@babel/helpers": "^7.10.4",
"@babel/parser": "^7.11.4",
"@babel/parser": "^7.11.5",
"@babel/template": "^7.10.4",
"@babel/traverse": "^7.11.0",
"@babel/types": "^7.11.0",
"@babel/traverse": "^7.11.5",
"@babel/types": "^7.11.5",
"convert-source-map": "^1.7.0",
"debug": "^4.1.0",
"gensync": "^1.0.0-beta.1",
@ -50,9 +50,20 @@
"lodash": "^4.17.19",
"resolve": "^1.3.2",
"semver": "^5.4.1",
"source-map": "^0.5.0"
"source-map": "^0.6.1"
},
"dependencies": {
"@babel/types": {
"version": "7.11.5",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
"integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
"dev": true,
"requires": {
"@babel/helper-validator-identifier": "^7.10.4",
"lodash": "^4.17.19",
"to-fast-properties": "^2.0.0"
}
},
"debug": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@ -71,14 +82,27 @@
}
},
"@babel/generator": {
"version": "7.11.4",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.4.tgz",
"integrity": "sha512-Rn26vueFx0eOoz7iifCN2UHT6rGtnkSGWSoDRIy8jZN3B91PzeSULbswfLoOWuTuAcNwpG/mxy+uCTDnZ9Mp1g==",
"version": "7.11.5",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.5.tgz",
"integrity": "sha512-9UqHWJ4IwRTy4l0o8gq2ef8ws8UPzvtMkVKjTLAiRmza9p9V6Z+OfuNd9fB1j5Q67F+dVJtPC2sZXI8NM9br4g==",
"dev": true,
"requires": {
"@babel/types": "^7.11.0",
"@babel/types": "^7.11.5",
"jsesc": "^2.5.1",
"source-map": "^0.5.0"
"source-map": "^0.6.1"
},
"dependencies": {
"@babel/types": {
"version": "7.11.5",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
"integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
"dev": true,
"requires": {
"@babel/helper-validator-identifier": "^7.10.4",
"lodash": "^4.17.19",
"to-fast-properties": "^2.0.0"
}
}
}
},
"@babel/helper-annotate-as-pure": {
@ -337,9 +361,9 @@
}
},
"@babel/parser": {
"version": "7.11.4",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.4.tgz",
"integrity": "sha512-MggwidiH+E9j5Sh8pbrX5sJvMcsqS5o+7iB42M9/k0CD63MjYbdP4nhSh7uB5wnv2/RVzTZFTxzF/kIa5mrCqA==",
"version": "7.11.5",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.5.tgz",
"integrity": "sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==",
"dev": true
},
"@babel/plugin-proposal-async-generator-functions": {
@ -832,9 +856,9 @@
}
},
"@babel/plugin-transform-runtime": {
"version": "7.11.0",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.11.0.tgz",
"integrity": "sha512-LFEsP+t3wkYBlis8w6/kmnd6Kb1dxTd+wGJ8MlxTGzQo//ehtqlVL4S9DNUa53+dtPSQobN2CXx4d81FqC58cw==",
"version": "7.11.5",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.11.5.tgz",
"integrity": "sha512-9aIoee+EhjySZ6vY5hnLjigHzunBlscx9ANKutkeWTJTx6m5Rbq6Ic01tLvO54lSusR+BxV7u4UDdCmXv5aagg==",
"dev": true,
"requires": {
"@babel/helper-module-imports": "^7.10.4",
@ -911,9 +935,9 @@
}
},
"@babel/preset-env": {
"version": "7.11.0",
"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.11.0.tgz",
"integrity": "sha512-2u1/k7rG/gTh02dylX2kL3S0IJNF+J6bfDSp4DI2Ma8QN6Y9x9pmAax59fsCk6QUQG0yqH47yJWA+u1I1LccAg==",
"version": "7.11.5",
"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.11.5.tgz",
"integrity": "sha512-kXqmW1jVcnB2cdueV+fyBM8estd5mlNfaQi6lwLgRwCby4edpavgbFhiBNjmWA3JpB/yZGSISa7Srf+TwxDQoA==",
"dev": true,
"requires": {
"@babel/compat-data": "^7.11.0",
@ -978,12 +1002,25 @@
"@babel/plugin-transform-unicode-escapes": "^7.10.4",
"@babel/plugin-transform-unicode-regex": "^7.10.4",
"@babel/preset-modules": "^0.1.3",
"@babel/types": "^7.11.0",
"@babel/types": "^7.11.5",
"browserslist": "^4.12.0",
"core-js-compat": "^3.6.2",
"invariant": "^2.2.2",
"levenary": "^1.1.1",
"semver": "^5.5.0"
},
"dependencies": {
"@babel/types": {
"version": "7.11.5",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
"integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
"dev": true,
"requires": {
"@babel/helper-validator-identifier": "^7.10.4",
"lodash": "^4.17.19",
"to-fast-properties": "^2.0.0"
}
}
}
},
"@babel/preset-modules": {
@ -1020,22 +1057,33 @@
}
},
"@babel/traverse": {
"version": "7.11.0",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.0.tgz",
"integrity": "sha512-ZB2V+LskoWKNpMq6E5UUCrjtDUh5IOTAyIl0dTjIEoXum/iKWkoIEKIRDnUucO6f+2FzNkE0oD4RLKoPIufDtg==",
"version": "7.11.5",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.11.5.tgz",
"integrity": "sha512-EjiPXt+r7LiCZXEfRpSJd+jUMnBd4/9OUv7Nx3+0u9+eimMwJmG0Q98lw4/289JCoxSE8OolDMNZaaF/JZ69WQ==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.10.4",
"@babel/generator": "^7.11.0",
"@babel/generator": "^7.11.5",
"@babel/helper-function-name": "^7.10.4",
"@babel/helper-split-export-declaration": "^7.11.0",
"@babel/parser": "^7.11.0",
"@babel/types": "^7.11.0",
"@babel/parser": "^7.11.5",
"@babel/types": "^7.11.5",
"debug": "^4.1.0",
"globals": "^11.1.0",
"lodash": "^4.17.19"
},
"dependencies": {
"@babel/types": {
"version": "7.11.5",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.11.5.tgz",
"integrity": "sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==",
"dev": true,
"requires": {
"@babel/helper-validator-identifier": "^7.10.4",
"lodash": "^4.17.19",
"to-fast-properties": "^2.0.0"
}
},
"debug": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@ -1083,9 +1131,9 @@
"dev": true
},
"@iconify/core": {
"version": "1.0.0-beta.5",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-beta.5.tgz",
"integrity": "sha512-o7+pYUbrOfnFAzdnsB+KfNZa4PY/8x+BJwDMR7okiy9CiKVjq0X7qtEL08aFY6cpCX2rdxA0Ikeph/azZvjgZw==",
"version": "1.0.0-rc.1",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-rc.1.tgz",
"integrity": "sha512-fkDykGh4CwPPtIiS1WWfDVDZTwVVhJOAzVpUpcQel0NdQ95ndQTZwFHiTcy8GD0CgFRekFGyVy42h20qH72f0Q==",
"dev": true,
"requires": {
"@cyberalien/redundancy": "^1.0.0",
@ -1296,9 +1344,9 @@
}
},
"caniuse-lite": {
"version": "1.0.30001120",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001120.tgz",
"integrity": "sha512-JBP68okZs1X8D7MQTY602jxMYBmXEKOFkzTBaNSkubooMPFOAv2TXWaKle7qgHpjLDhUzA/TMT0qsNleVyXGUQ==",
"version": "1.0.30001123",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001123.tgz",
"integrity": "sha512-03dJDoa4YC4332jq0rqwiM+Hw6tA5RJtrnZKvOQy7ASoIUv8CinkcmGhYpCvCjedvkBQrrKnkcELxrUSW/XwNQ==",
"dev": true
},
"chalk": {
@ -1448,9 +1496,9 @@
}
},
"electron-to-chromium": {
"version": "1.3.555",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.555.tgz",
"integrity": "sha512-/55x3nF2feXFZ5tdGUOr00TxnUjUgdxhrn+eCJ1FAcoAt+cKQTjQkUC5XF4frMWE1R5sjHk+JueuBalimfe5Pg==",
"version": "1.3.560",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.560.tgz",
"integrity": "sha512-0cEFfOA3sNXfSxo0FIClBhrLVSe/QO9LBiqmmYPm3N/IYyt41NRTa2EhvOMWAOKpjd91t/rq062yhnJzfVMKkQ==",
"dev": true
},
"error-ex": {
@ -2170,9 +2218,9 @@
}
},
"rollup": {
"version": "2.26.8",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.8.tgz",
"integrity": "sha512-li9WaJYc5z9WzV1jhZbPQCrsOpGNsI+Li1qyrn5n745ZNSnlkRlBtj1Hs+Z0Dc2N1+P7HT34UKAEASqN9Th8cg==",
"version": "2.26.9",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.9.tgz",
"integrity": "sha512-XIiWYLayLqV+oY4S2Lub/shJq4uk/QQLwWToYCL4LjZbYHbFK3czea4UDVRUJu+zNmKmxq5Zb/OG7c5HSvH2TQ==",
"dev": true,
"requires": {
"fsevents": "~2.1.2"
@ -2312,9 +2360,9 @@
}
},
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
},
"source-map-support": {

8
packages/sapper-demo/package.json
View File

@ -17,10 +17,10 @@
"sirv": "^1.0.6"
},
"devDependencies": {
"@babel/core": "^7.11.4",
"@babel/core": "^7.11.5",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.11.0",
"@babel/preset-env": "^7.11.0",
"@babel/plugin-transform-runtime": "^7.11.5",
"@babel/preset-env": "^7.11.5",
"@babel/runtime": "^7.11.2",
"@iconify-icons/bi": "^1.0.0",
"@iconify-icons/openmoji": "^1.0.0",
@ -30,7 +30,7 @@
"@rollup/plugin-node-resolve": "^9.0.0",
"@rollup/plugin-replace": "^2.3.3",
"npm-run-all": "^4.1.5",
"rollup": "^2.26.8",
"rollup": "^2.26.9",
"rollup-plugin-svelte": "^6.0.0",
"rollup-plugin-terser": "^7.0.1",
"sapper": "^0.28.3",

12
packages/svelte-demo/package-lock.json generated
View File

@ -49,9 +49,9 @@
"dev": true
},
"@iconify/core": {
"version": "1.0.0-beta.5",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-beta.5.tgz",
"integrity": "sha512-o7+pYUbrOfnFAzdnsB+KfNZa4PY/8x+BJwDMR7okiy9CiKVjq0X7qtEL08aFY6cpCX2rdxA0Ikeph/azZvjgZw==",
"version": "1.0.0-rc.1",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-rc.1.tgz",
"integrity": "sha512-fkDykGh4CwPPtIiS1WWfDVDZTwVVhJOAzVpUpcQel0NdQ95ndQTZwFHiTcy8GD0CgFRekFGyVy42h20qH72f0Q==",
"dev": true,
"requires": {
"@cyberalien/redundancy": "^1.0.0",
@ -623,9 +623,9 @@
}
},
"rollup": {
"version": "2.26.8",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.8.tgz",
"integrity": "sha512-li9WaJYc5z9WzV1jhZbPQCrsOpGNsI+Li1qyrn5n745ZNSnlkRlBtj1Hs+Z0Dc2N1+P7HT34UKAEASqN9Th8cg==",
"version": "2.26.9",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.9.tgz",
"integrity": "sha512-XIiWYLayLqV+oY4S2Lub/shJq4uk/QQLwWToYCL4LjZbYHbFK3czea4UDVRUJu+zNmKmxq5Zb/OG7c5HSvH2TQ==",
"dev": true,
"requires": {
"fsevents": "~2.1.2"

2
packages/svelte-demo/package.json
View File

@ -13,7 +13,7 @@
"@iconify/svelte": "^1.0.2",
"@rollup/plugin-commonjs": "^15.0.0",
"@rollup/plugin-node-resolve": "^9.0.0",
"rollup": "^2.26.8",
"rollup": "^2.26.9",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^6.0.0",
"rollup-plugin-terser": "^7.0.1",

12
packages/svelte/package-lock.json generated
View File

@ -10,9 +10,9 @@
"integrity": "sha512-/tx5GpGSyMn5FrOSggDSm9yJDLcEXiK0+zdCBssST6w9QgdJjoQ9lRBSxql/3vgQoI+7XbubWsP86jjbuVnFcA=="
},
"@iconify/core": {
"version": "1.0.0-beta.5",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-beta.5.tgz",
"integrity": "sha512-o7+pYUbrOfnFAzdnsB+KfNZa4PY/8x+BJwDMR7okiy9CiKVjq0X7qtEL08aFY6cpCX2rdxA0Ikeph/azZvjgZw==",
"version": "1.0.0-rc.1",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-rc.1.tgz",
"integrity": "sha512-fkDykGh4CwPPtIiS1WWfDVDZTwVVhJOAzVpUpcQel0NdQ95ndQTZwFHiTcy8GD0CgFRekFGyVy42h20qH72f0Q==",
"requires": {
"@cyberalien/redundancy": "^1.0.0",
"@iconify/types": "^1.0.3",
@ -291,9 +291,9 @@
}
},
"rollup": {
"version": "2.26.8",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.8.tgz",
"integrity": "sha512-li9WaJYc5z9WzV1jhZbPQCrsOpGNsI+Li1qyrn5n745ZNSnlkRlBtj1Hs+Z0Dc2N1+P7HT34UKAEASqN9Th8cg==",
"version": "2.26.9",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.9.tgz",
"integrity": "sha512-XIiWYLayLqV+oY4S2Lub/shJq4uk/QQLwWToYCL4LjZbYHbFK3czea4UDVRUJu+zNmKmxq5Zb/OG7c5HSvH2TQ==",
"dev": true,
"requires": {
"fsevents": "~2.1.2"

4
packages/svelte/package.json
View File

@ -19,13 +19,13 @@
"build:dist": "rollup -c rollup.config.js"
},
"dependencies": {
"@iconify/core": "^1.0.0-beta.5",
"@iconify/core": "^1.0.0-rc.1",
"@iconify/types": "^1.0.3"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^15.0.0",
"@rollup/plugin-node-resolve": "^9.0.0",
"rollup": "^2.26.8",
"rollup": "^2.26.9",
"rollup-plugin-svelte": "^6.0.0",
"svelte": "^3.24.1"
}

174
packages/vue-demo/package-lock.json generated
View File

@ -63,9 +63,9 @@
"dev": true
},
"@iconify/vue": {
"version": "2.0.0-beta.0",
"resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-2.0.0-beta.0.tgz",
"integrity": "sha512-Rj3qahdi9nJElc6QgAnp0cUEe6AdGpvo1aJycyrGaSwc4v3u5DlN8FrM0V9HLT3i2TEhrIWnK2rjjA4WlzuxFw==",
"version": "2.0.0-rc.1",
"resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-2.0.0-rc.1.tgz",
"integrity": "sha512-3e1yOCIeALLWRq2iLcrdH6GTV/HF1XhS2QXUL5hFQQiLGIxw+XaArmBYXLtymKevpD3/e6K9N0drxwbTfuX/8g==",
"dev": true
},
"@nodelib/fs.scandir": {
@ -357,17 +357,17 @@
}
},
"@vue/compiler-sfc": {
"version": "3.0.0-rc.9",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.0-rc.9.tgz",
"integrity": "sha512-kmjGzcyp93Q+ZKfvxC3GtI9bEXCa9TxsuO+Q9WtiyvOWBLxZkklQc1n5DFn6vtAUIjjlIE5GZoKawvn9LfKejA==",
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.0.0-rc.10.tgz",
"integrity": "sha512-VIJ+VXqeM7WoRNgD9uYSARVb6CYq+JS2NNHfeerfNc7Uk3pjYHRv1MwEicAvN6zWFm5GLC1ZYTVD+WFg3xGAkQ==",
"dev": true,
"requires": {
"@babel/parser": "^7.10.4",
"@babel/types": "^7.10.4",
"@vue/compiler-core": "3.0.0-rc.9",
"@vue/compiler-dom": "3.0.0-rc.9",
"@vue/compiler-ssr": "3.0.0-rc.9",
"@vue/shared": "3.0.0-rc.9",
"@vue/compiler-core": "3.0.0-rc.10",
"@vue/compiler-dom": "3.0.0-rc.10",
"@vue/compiler-ssr": "3.0.0-rc.10",
"@vue/shared": "3.0.0-rc.10",
"consolidate": "^0.15.1",
"estree-walker": "^2.0.1",
"hash-sum": "^2.0.0",
@ -378,63 +378,125 @@
"postcss-modules": "^3.1.0",
"postcss-selector-parser": "^6.0.2",
"source-map": "^0.6.1"
},
"dependencies": {
"@vue/compiler-core": {
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.0-rc.10.tgz",
"integrity": "sha512-kQzHzRsM0NPAWHeqSTb2J4VsHhjRkGeLTsGzeMnW+sojgTnS3T94KacwvYgVS4qeZAKiDq0bMNZoJWrHVQ3T8g==",
"dev": true,
"requires": {
"@babel/parser": "^7.10.4",
"@babel/types": "^7.10.4",
"@vue/shared": "3.0.0-rc.10",
"estree-walker": "^2.0.1",
"source-map": "^0.6.1"
}
},
"@vue/compiler-dom": {
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.0-rc.10.tgz",
"integrity": "sha512-pqIUf5leZm0P9379utrRSVBMxhV8XaqJTEFFp5etCtbEa/H5ALs29EjFMtMcm9sQaVkZlKLu86mgIacbYB9Q3w==",
"dev": true,
"requires": {
"@vue/compiler-core": "3.0.0-rc.10",
"@vue/shared": "3.0.0-rc.10"
}
},
"@vue/shared": {
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.10.tgz",
"integrity": "sha512-fI6gVhhgb3cAmEkY4oeVVA2hWZ2xvkgogHdBI5PL7gSvZnOB6XZ2eQGsYjC4W+7BegvEkoMBuZsFXVa4ZQ07XQ==",
"dev": true
}
}
},
"@vue/compiler-ssr": {
"version": "3.0.0-rc.9",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.0-rc.9.tgz",
"integrity": "sha512-lpbnkJrhkI5QgprLPXcB1Uq402QiibPFKRUQZ5vu3zeAvUeMYuQUtZS/Dslurcvqd1dbBC/HM0gCpLtjEQ+2qA==",
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.0-rc.10.tgz",
"integrity": "sha512-JBPil8sO5j7puB8acX2CQMRXEYB/EP8PoEur7RcF/+aqATI7C4yqWcSLC5TRJpigj6xE6ku6sx8om+j7ZHvgBw==",
"dev": true,
"requires": {
"@vue/compiler-dom": "3.0.0-rc.9",
"@vue/shared": "3.0.0-rc.9"
"@vue/compiler-dom": "3.0.0-rc.10",
"@vue/shared": "3.0.0-rc.10"
},
"dependencies": {
"@vue/compiler-core": {
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.0-rc.10.tgz",
"integrity": "sha512-kQzHzRsM0NPAWHeqSTb2J4VsHhjRkGeLTsGzeMnW+sojgTnS3T94KacwvYgVS4qeZAKiDq0bMNZoJWrHVQ3T8g==",
"dev": true,
"requires": {
"@babel/parser": "^7.10.4",
"@babel/types": "^7.10.4",
"@vue/shared": "3.0.0-rc.10",
"estree-walker": "^2.0.1",
"source-map": "^0.6.1"
}
},
"@vue/compiler-dom": {
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.0-rc.10.tgz",
"integrity": "sha512-pqIUf5leZm0P9379utrRSVBMxhV8XaqJTEFFp5etCtbEa/H5ALs29EjFMtMcm9sQaVkZlKLu86mgIacbYB9Q3w==",
"dev": true,
"requires": {
"@vue/compiler-core": "3.0.0-rc.10",
"@vue/shared": "3.0.0-rc.10"
}
},
"@vue/shared": {
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.10.tgz",
"integrity": "sha512-fI6gVhhgb3cAmEkY4oeVVA2hWZ2xvkgogHdBI5PL7gSvZnOB6XZ2eQGsYjC4W+7BegvEkoMBuZsFXVa4ZQ07XQ==",
"dev": true
}
}
},
"@vue/reactivity": {
"version": "3.0.0-rc.9",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.0-rc.9.tgz",
"integrity": "sha512-1fJSt4zZ/icZUNsN3Te5BeVChmQ7Ner2xUYy9ALtShLSj2RwxRVhtysjXxLE16TbwLkHjsOHjA8tQWrdBfQG0A==",
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.0-rc.10.tgz",
"integrity": "sha512-mkUZfOJlbqGZx2cARmhCs5r2+xLJPL7VFNagmlA3Fd66ZXBc3ZvTQdYsY4VUbYJFe5ByIzqu9TZiAkzXY+JVaA==",
"requires": {
"@vue/shared": "3.0.0-rc.9"
"@vue/shared": "3.0.0-rc.10"
},
"dependencies": {
"@vue/shared": {
"version": "3.0.0-rc.9",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.9.tgz",
"integrity": "sha512-SHD7qwziiG6208nKrs0qqbWbYckvBiCBCLwlRjUb6NEDUMN0TOVyzyaTvdnHND9ion/ZMdwEKMtWWtgJJkHDdw=="
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.10.tgz",
"integrity": "sha512-fI6gVhhgb3cAmEkY4oeVVA2hWZ2xvkgogHdBI5PL7gSvZnOB6XZ2eQGsYjC4W+7BegvEkoMBuZsFXVa4ZQ07XQ=="
}
}
},
"@vue/runtime-core": {
"version": "3.0.0-rc.9",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.0-rc.9.tgz",
"integrity": "sha512-5tViEzPl8K1moMjCQJXqvTa/RjR/h8cZ9dUDgKfKWvZhxAmXHtmYlBWrvEeFTGWiEuZj0XlZkNxMNjuHLVF0Vg==",
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.0-rc.10.tgz",
"integrity": "sha512-VK/kq4gDDoqZ45CVwdbLLpikXLYLCt6YLhdgXX3fhf20gvPqrbEZv1ZNLruNnhhTpf9cLyU4tZ18DHeaUYPziw==",
"requires": {
"@vue/reactivity": "3.0.0-rc.9",
"@vue/shared": "3.0.0-rc.9"
"@vue/reactivity": "3.0.0-rc.10",
"@vue/shared": "3.0.0-rc.10"
},
"dependencies": {
"@vue/shared": {
"version": "3.0.0-rc.9",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.9.tgz",
"integrity": "sha512-SHD7qwziiG6208nKrs0qqbWbYckvBiCBCLwlRjUb6NEDUMN0TOVyzyaTvdnHND9ion/ZMdwEKMtWWtgJJkHDdw=="
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.10.tgz",
"integrity": "sha512-fI6gVhhgb3cAmEkY4oeVVA2hWZ2xvkgogHdBI5PL7gSvZnOB6XZ2eQGsYjC4W+7BegvEkoMBuZsFXVa4ZQ07XQ=="
}
}
},
"@vue/runtime-dom": {
"version": "3.0.0-rc.9",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.0-rc.9.tgz",
"integrity": "sha512-OUKFLOaoshmQPaW7iaYuxl9ip3v08g8cXYr0bu68/0r94PF2/xO/b0GhoUoyeqp/pu1VzZ1TxulJ94JOXsuYjg==",
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.0-rc.10.tgz",
"integrity": "sha512-bH4GuneHt3FQ+/21jba5orM/CO9N1cnT7J3wtrxopFJ4/4H5cvHXyG6v+ZVTu1d733Ij/6yMRA7xbtfi9a4zJw==",
"requires": {
"@vue/runtime-core": "3.0.0-rc.9",
"@vue/shared": "3.0.0-rc.9",
"@vue/runtime-core": "3.0.0-rc.10",
"@vue/shared": "3.0.0-rc.10",
"csstype": "^2.6.8"
},
"dependencies": {
"@vue/shared": {
"version": "3.0.0-rc.9",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.9.tgz",
"integrity": "sha512-SHD7qwziiG6208nKrs0qqbWbYckvBiCBCLwlRjUb6NEDUMN0TOVyzyaTvdnHND9ion/ZMdwEKMtWWtgJJkHDdw=="
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.10.tgz",
"integrity": "sha512-fI6gVhhgb3cAmEkY4oeVVA2hWZ2xvkgogHdBI5PL7gSvZnOB6XZ2eQGsYjC4W+7BegvEkoMBuZsFXVa4ZQ07XQ=="
}
}
},
@ -2551,40 +2613,40 @@
}
},
"vue": {
"version": "3.0.0-rc.9",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.0-rc.9.tgz",
"integrity": "sha512-bimvpl5q/sKy1dAOE+KNX9T3p6Qq8kuNRmOYwaxtacI91ksjS7nVGse1FANhTL+XTQgl8+ySrd3f67xWi26nxw==",
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.0-rc.10.tgz",
"integrity": "sha512-nRsyIQtOWLDMBb5dsPwg/WdIqznCMVWN6O6wJSzhseKC768wHlZKcJ7SPHhWPid9wi3Ykhtl9vtgvxTK/qICkw==",
"requires": {
"@vue/compiler-dom": "3.0.0-rc.9",
"@vue/runtime-dom": "3.0.0-rc.9",
"@vue/shared": "3.0.0-rc.9"
"@vue/compiler-dom": "3.0.0-rc.10",
"@vue/runtime-dom": "3.0.0-rc.10",
"@vue/shared": "3.0.0-rc.10"
},
"dependencies": {
"@vue/compiler-core": {
"version": "3.0.0-rc.9",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.0-rc.9.tgz",
"integrity": "sha512-/Ns7KGT5P0wh4JTM91drBmNIiBlKrCFUqIE2vk8dmaVvqEJf1mqympz1CDZpikghCQC6hKu3tYKxA7qtcMRazw==",
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.0-rc.10.tgz",
"integrity": "sha512-kQzHzRsM0NPAWHeqSTb2J4VsHhjRkGeLTsGzeMnW+sojgTnS3T94KacwvYgVS4qeZAKiDq0bMNZoJWrHVQ3T8g==",
"requires": {
"@babel/parser": "^7.10.4",
"@babel/types": "^7.10.4",
"@vue/shared": "3.0.0-rc.9",
"@vue/shared": "3.0.0-rc.10",
"estree-walker": "^2.0.1",
"source-map": "^0.6.1"
}
},
"@vue/compiler-dom": {
"version": "3.0.0-rc.9",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.0-rc.9.tgz",
"integrity": "sha512-0hCnrIxwp0TKVXKnGYFztM4LMUvFpfXW7YoEglvHqIfZsGkyKcnCYDx4FPk1frDM21xnrr5HgcHt42rlz8lDBA==",
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.0-rc.10.tgz",
"integrity": "sha512-pqIUf5leZm0P9379utrRSVBMxhV8XaqJTEFFp5etCtbEa/H5ALs29EjFMtMcm9sQaVkZlKLu86mgIacbYB9Q3w==",
"requires": {
"@vue/compiler-core": "3.0.0-rc.9",
"@vue/shared": "3.0.0-rc.9"
"@vue/compiler-core": "3.0.0-rc.10",
"@vue/shared": "3.0.0-rc.10"
}
},
"@vue/shared": {
"version": "3.0.0-rc.9",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.9.tgz",
"integrity": "sha512-SHD7qwziiG6208nKrs0qqbWbYckvBiCBCLwlRjUb6NEDUMN0TOVyzyaTvdnHND9ion/ZMdwEKMtWWtgJJkHDdw=="
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.10.tgz",
"integrity": "sha512-fI6gVhhgb3cAmEkY4oeVVA2hWZ2xvkgogHdBI5PL7gSvZnOB6XZ2eQGsYjC4W+7BegvEkoMBuZsFXVa4ZQ07XQ=="
}
}
},

6
packages/vue-demo/package.json
View File

@ -7,14 +7,14 @@
"build": "vite build"
},
"dependencies": {
"vue": "^3.0.0-rc.9"
"vue": "^3.0.0-rc.10"
},
"devDependencies": {
"@iconify-icons/bx": "^1.0.0",
"@iconify-icons/dashicons": "^1.0.0",
"@iconify/types": "^1.0.3",
"@iconify/vue": "^2.0.0-beta.0",
"@vue/compiler-sfc": "^3.0.0-rc.9",
"@iconify/vue": "^2.0.0-rc.1",
"@vue/compiler-sfc": "^3.0.0-rc.10",
"typescript": "^4.0.2",
"vite": "^1.0.0-rc.4"
}

33
packages/vue-demo/src/App.vue
View File

@ -15,9 +15,19 @@
icon from icon font):
<InlineIcon v-bind:icon="userIcon" />
</div>
<div>
2 icons imported from icon set:
<Icon
icon="mdi-light:account-alert"
style="font-size: 24px; line-height: 1em; vertical-align: -0.125em"
/>
<Icon
icon="mdi-light:link"
:style="{fontSize: '24px', lineHeight: '1em', verticalAlign: '-0.125em'}"
/>
</div>
<div class="alert">
<Icon :icon="alertIcon" />
Important notice with alert icon!
<Icon :icon="alertIcon" />Important notice with alert icon!
</div>
</section>
<section>
@ -35,7 +45,7 @@
</template>
<script lang="ts">
import { Icon, InlineIcon, addIcon } from '@iconify/vue';
import { Icon, InlineIcon, addIcon, addCollection } from '@iconify/vue';
import paperclipIcon from '@iconify-icons/dashicons/paperclip';
import bxMinusCircle from '@iconify-icons/bx/bx-minus-circle';
@ -61,6 +71,23 @@ addIcon('experiment2', {
'<circle fill-opacity="0.2" cx="8" cy="8" r="7" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15Z" fill="currentColor"/><path d="M7 9L5 7L3.5 8.5L7 12L13 6L11.5 4.5L7 9Z" fill="currentColor"/>',
});
// Add few mdi-light: icons
addCollection({
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,
});
export default {
name: 'App',
components: {

40
packages/vue/README.md
View File

@ -26,15 +26,17 @@ Iconify for Vue features:
If you are using NPM:
```bash
npm install --save-dev @iconify/vue
npm install --save-dev @iconify/vue@beta
```
If you are using Yarn:
```bash
yarn add --dev @iconify/vue
yarn add --dev @iconify/vue@beta
```
Make sure you are installing `@iconify/vue@beta`, not `@iconify/vue` because `@iconify/vue` is for Vue 2. It will change when Vue 3.0.0 is published.
This package does not include icons. Icons are split into separate packages that available at NPM. See below.
### Vue 2 compatibility
@ -163,12 +165,42 @@ export default {
</script>
```
Instead of adding icons one by one using `addIcon` function, you can import an entire icon set using `addCollection` function:
```vue
<template>
<Icon icon="jam:home" height="24" />
</template>
<script>
import { Icon, addCollection } from '@iconify/vue';
// 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 default {
components: {
Icon,
},
};
</script>
```
Example above imports an entire icon set. To learn how to create smaller bundles, check out Iconify documentation: https://docs.iconify.design/sources/bundles/
## Migration from Vue 2
If you are migrating from version 1 of this component, which was designed for Vue 2, there are some big differences in usage:
- Component was a default export. In new version `Icon` is a named export.
- `addIcon()` was property of component. In new version it is a separate named export.
- `addIcon()` and `addCollection()` were properties of component. In new version they are separate named exports.
- New `InlineIcon` component (see "inline" section below) for easier use inside text.
Example code for Vue 2:
@ -216,7 +248,7 @@ export default {
## 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`, see instructions above) or an object containing the icon data.
`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:

84
packages/vue/package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "@iconify/vue",
"version": "2.0.0-beta.0",
"version": "2.0.0-rc.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -420,9 +420,9 @@
"dev": true
},
"@iconify/core": {
"version": "1.0.0-beta.5",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-beta.5.tgz",
"integrity": "sha512-o7+pYUbrOfnFAzdnsB+KfNZa4PY/8x+BJwDMR7okiy9CiKVjq0X7qtEL08aFY6cpCX2rdxA0Ikeph/azZvjgZw==",
"version": "1.0.0-rc.1",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-rc.1.tgz",
"integrity": "sha512-fkDykGh4CwPPtIiS1WWfDVDZTwVVhJOAzVpUpcQel0NdQ95ndQTZwFHiTcy8GD0CgFRekFGyVy42h20qH72f0Q==",
"dev": true,
"requires": {
"@cyberalien/redundancy": "^1.0.0",
@ -1550,9 +1550,9 @@
}
},
"@types/jest": {
"version": "26.0.10",
"resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.10.tgz",
"integrity": "sha512-i2m0oyh8w/Lum7wWK/YOZJakYF8Mx08UaKA1CtbmFeDquVhAEdA7znacsVSf2hJ1OQ/OfVMGN90pw/AtzF8s/Q==",
"version": "26.0.13",
"resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.13.tgz",
"integrity": "sha512-sCzjKow4z9LILc6DhBvn5AkIfmQzDZkgtVVKmGwVrs5tuid38ws281D4l+7x1kP487+FlKDh5kfMZ8WSPAdmdA==",
"dev": true,
"requires": {
"jest-diff": "^25.2.1",
@ -1608,14 +1608,14 @@
"dev": true
},
"@vue/compiler-core": {
"version": "3.0.0-rc.9",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.0-rc.9.tgz",
"integrity": "sha512-/Ns7KGT5P0wh4JTM91drBmNIiBlKrCFUqIE2vk8dmaVvqEJf1mqympz1CDZpikghCQC6hKu3tYKxA7qtcMRazw==",
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.0-rc.10.tgz",
"integrity": "sha512-kQzHzRsM0NPAWHeqSTb2J4VsHhjRkGeLTsGzeMnW+sojgTnS3T94KacwvYgVS4qeZAKiDq0bMNZoJWrHVQ3T8g==",
"dev": true,
"requires": {
"@babel/parser": "^7.10.4",
"@babel/types": "^7.10.4",
"@vue/shared": "3.0.0-rc.9",
"@vue/shared": "3.0.0-rc.10",
"estree-walker": "^2.0.1",
"source-map": "^0.6.1"
},
@ -1629,49 +1629,49 @@
}
},
"@vue/compiler-dom": {
"version": "3.0.0-rc.9",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.0-rc.9.tgz",
"integrity": "sha512-0hCnrIxwp0TKVXKnGYFztM4LMUvFpfXW7YoEglvHqIfZsGkyKcnCYDx4FPk1frDM21xnrr5HgcHt42rlz8lDBA==",
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.0-rc.10.tgz",
"integrity": "sha512-pqIUf5leZm0P9379utrRSVBMxhV8XaqJTEFFp5etCtbEa/H5ALs29EjFMtMcm9sQaVkZlKLu86mgIacbYB9Q3w==",
"dev": true,
"requires": {
"@vue/compiler-core": "3.0.0-rc.9",
"@vue/shared": "3.0.0-rc.9"
"@vue/compiler-core": "3.0.0-rc.10",
"@vue/shared": "3.0.0-rc.10"
}
},
"@vue/reactivity": {
"version": "3.0.0-rc.9",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.0-rc.9.tgz",
"integrity": "sha512-1fJSt4zZ/icZUNsN3Te5BeVChmQ7Ner2xUYy9ALtShLSj2RwxRVhtysjXxLE16TbwLkHjsOHjA8tQWrdBfQG0A==",
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.0-rc.10.tgz",
"integrity": "sha512-mkUZfOJlbqGZx2cARmhCs5r2+xLJPL7VFNagmlA3Fd66ZXBc3ZvTQdYsY4VUbYJFe5ByIzqu9TZiAkzXY+JVaA==",
"dev": true,
"requires": {
"@vue/shared": "3.0.0-rc.9"
"@vue/shared": "3.0.0-rc.10"
}
},
"@vue/runtime-core": {
"version": "3.0.0-rc.9",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.0-rc.9.tgz",
"integrity": "sha512-5tViEzPl8K1moMjCQJXqvTa/RjR/h8cZ9dUDgKfKWvZhxAmXHtmYlBWrvEeFTGWiEuZj0XlZkNxMNjuHLVF0Vg==",
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.0-rc.10.tgz",
"integrity": "sha512-VK/kq4gDDoqZ45CVwdbLLpikXLYLCt6YLhdgXX3fhf20gvPqrbEZv1ZNLruNnhhTpf9cLyU4tZ18DHeaUYPziw==",
"dev": true,
"requires": {
"@vue/reactivity": "3.0.0-rc.9",
"@vue/shared": "3.0.0-rc.9"
"@vue/reactivity": "3.0.0-rc.10",
"@vue/shared": "3.0.0-rc.10"
}
},
"@vue/runtime-dom": {
"version": "3.0.0-rc.9",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.0-rc.9.tgz",
"integrity": "sha512-OUKFLOaoshmQPaW7iaYuxl9ip3v08g8cXYr0bu68/0r94PF2/xO/b0GhoUoyeqp/pu1VzZ1TxulJ94JOXsuYjg==",
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.0-rc.10.tgz",
"integrity": "sha512-bH4GuneHt3FQ+/21jba5orM/CO9N1cnT7J3wtrxopFJ4/4H5cvHXyG6v+ZVTu1d733Ij/6yMRA7xbtfi9a4zJw==",
"dev": true,
"requires": {
"@vue/runtime-core": "3.0.0-rc.9",
"@vue/shared": "3.0.0-rc.9",
"@vue/runtime-core": "3.0.0-rc.10",
"@vue/shared": "3.0.0-rc.10",
"csstype": "^2.6.8"
}
},
"@vue/shared": {
"version": "3.0.0-rc.9",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.9.tgz",
"integrity": "sha512-SHD7qwziiG6208nKrs0qqbWbYckvBiCBCLwlRjUb6NEDUMN0TOVyzyaTvdnHND9ion/ZMdwEKMtWWtgJJkHDdw==",
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.0-rc.10.tgz",
"integrity": "sha512-fI6gVhhgb3cAmEkY4oeVVA2hWZ2xvkgogHdBI5PL7gSvZnOB6XZ2eQGsYjC4W+7BegvEkoMBuZsFXVa4ZQ07XQ==",
"dev": true
},
"@vue/test-utils": {
@ -7555,9 +7555,9 @@
}
},
"rollup": {
"version": "2.26.8",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.8.tgz",
"integrity": "sha512-li9WaJYc5z9WzV1jhZbPQCrsOpGNsI+Li1qyrn5n745ZNSnlkRlBtj1Hs+Z0Dc2N1+P7HT34UKAEASqN9Th8cg==",
"version": "2.26.9",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.9.tgz",
"integrity": "sha512-XIiWYLayLqV+oY4S2Lub/shJq4uk/QQLwWToYCL4LjZbYHbFK3czea4UDVRUJu+zNmKmxq5Zb/OG7c5HSvH2TQ==",
"dev": true,
"requires": {
"fsevents": "~2.1.2"
@ -8571,14 +8571,14 @@
}
},
"vue": {
"version": "3.0.0-rc.9",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.0-rc.9.tgz",
"integrity": "sha512-bimvpl5q/sKy1dAOE+KNX9T3p6Qq8kuNRmOYwaxtacI91ksjS7nVGse1FANhTL+XTQgl8+ySrd3f67xWi26nxw==",
"version": "3.0.0-rc.10",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.0-rc.10.tgz",
"integrity": "sha512-nRsyIQtOWLDMBb5dsPwg/WdIqznCMVWN6O6wJSzhseKC768wHlZKcJ7SPHhWPid9wi3Ykhtl9vtgvxTK/qICkw==",
"dev": true,
"requires": {
"@vue/compiler-dom": "3.0.0-rc.9",
"@vue/runtime-dom": "3.0.0-rc.9",
"@vue/shared": "3.0.0-rc.9"
"@vue/compiler-dom": "3.0.0-rc.10",
"@vue/runtime-dom": "3.0.0-rc.10",
"@vue/shared": "3.0.0-rc.10"
}
},
"vue-jest": {

10
packages/vue/package.json
View File

@ -2,7 +2,7 @@
"name": "@iconify/vue",
"description": "Iconify icon component for Vue.",
"author": "Vjacheslav Trushkin",
"version": "2.0.0-beta.0",
"version": "2.0.0-rc.1",
"license": "MIT",
"bugs": "https://github.com/iconify/iconify/issues",
"homepage": "https://iconify.design/",
@ -26,21 +26,21 @@
"vue": "^3.0.0"
},
"devDependencies": {
"@iconify/core": "^1.0.0-beta.5",
"@iconify/core": "^1.0.0-rc.1",
"@iconify/types": "^1.0.3",
"@microsoft/api-extractor": "^7.9.11",
"@rollup/plugin-buble": "^0.21.3",
"@rollup/plugin-commonjs": "^15.0.0",
"@rollup/plugin-node-resolve": "^9.0.0",
"@types/jest": "^26.0.10",
"@types/jest": "^26.0.13",
"@vue/test-utils": "^2.0.0-beta.3",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.3.0",
"babel-preset-env": "^1.7.0",
"jest": "^26.4.2",
"rollup": "^2.26.8",
"rollup": "^2.26.9",
"typescript": "^4.0.2",
"vue": "^3.0.0-rc.9",
"vue": "^3.0.0-rc.10",
"vue-jest": "^5.0.0-alpha.3"
}
}

27
packages/vue/src/IconifyIcon.ts
View File

@ -1,6 +1,6 @@
import { h, VNode } from 'vue';
import { IconifyIcon as IconifyIconData } from '@iconify/types';
import { IconifyIcon as IconifyIconData, IconifyJSON } from '@iconify/types';
import {
IconifyIconCustomisations as IconCustomisations,
FullIconCustomisations,
@ -18,12 +18,14 @@ import { fullIcon } from '@iconify/core/lib/icon';
import { iconToSVG } from '@iconify/core/lib/builder';
import { replaceIDs } from '@iconify/core/lib/builder/ids';
import { merge } from '@iconify/core/lib/misc/merge';
import { parseIconSet } from '@iconify/core/lib/icon/icon-set';
/**
* Export types that could be used in component
*/
export type {
IconifyIconData,
IconifyJSON,
IconifyHorizontalIconAlignment,
IconifyVerticalIconAlignment,
IconifyIconSize,
@ -296,3 +298,26 @@ export const InlineIcon = IconifyIcon.bind(null, true);
export function addIcon(name: string, data: IconifyIconData) {
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;
}
});
}

70
packages/vue/tests/icon.test.js
View File

@ -1,5 +1,5 @@
import { mount } from '@vue/test-utils';
import { Icon, addIcon } from '../';
import { Icon, addIcon, addCollection } from '../';
const iconData = {
body:
@ -89,6 +89,74 @@ describe('Rendering icon', () => {
);
});
test('as string 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 Wrapper = {
components: { Icon },
template: `<Icon icon='mdi-light:home' />`,
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
'<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"></path>' +
'</svg>'
);
});
test('as string 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 Wrapper = {
components: { Icon },
template: `<Icon icon='custom-link' />`,
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
expect(item.exists()).toBe(true);
expect(item.html()).toStrictEqual(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
'<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"></path>' +
'</svg>'
);
});
test('replacing id', () => {
const Wrapper = {
components: { Icon },