agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-11-09 23:00:56 +00:00
Code Issues Releases Activity

Pass reference to SVG in React component

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2021-01-27 10:46:25 +02:00
parent a2a597b6d2
commit 6505545902
7 changed files with 432 additions and 553 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

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

@ -30,6 +30,6 @@
"devDependencies": {
"@iconify-icons/mdi-light": "^1.1.0",
"@iconify-icons/uil": "^1.1.0",
"@iconify/react": "^2.0.0-rc.4"
"@iconify/react": "^2.0.0-rc.5"
}
}

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

@ -157,6 +157,15 @@ function App() {
}}
/>
</p>
<p>
Testing reference by adding border to icon:{' '}
<Icon
icon="demo"
ref={(element) => {
element.style.border = '1px solid red';
}}
/>
</p>
</section>
<InlineDemo />

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

@ -1,12 +1,12 @@
{
"name": "@iconify/react",
"version": "2.0.0-rc.4",
"version": "2.0.0-rc.5",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@iconify/react",
"version": "2.0.0-rc.4",
"version": "2.0.0-rc.5",
"license": "MIT",
"devDependencies": {
"@babel/preset-env": "^7.12.7",
@ -1358,9 +1358,9 @@
"dev": true
},
"node_modules/@iconify/core": {
"version": "1.0.0-rc.4",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-rc.4.tgz",
"integrity": "sha512-mKAq58HM1vVPpnwDr751P/ffBDHtwMGkv4I4xZ8rutbvjbZRySGDq9A7/8dglv/1AVSHpCKhWyYUuFQHR3mhpg==",
"version": "1.0.0-rc.5",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-rc.5.tgz",
"integrity": "sha512-1VFvNlBqsX/pMRI3nd00UzEqAS7weayJ/CyCD18b8+kFa9PvoVcGAmob1bTTm++v+QKVqQs+8iQaBFl/DrrsvA==",
"dev": true,
"dependencies": {
"@cyberalien/redundancy": "^1.1.0",
@ -2004,9 +2004,9 @@
}
},
"node_modules/@microsoft/api-extractor": {
"version": "7.12.1",
"resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.12.1.tgz",
"integrity": "sha512-lleLrKkqiRvOQeoRMSHQY0wl/j9SxRVd9+Btyh/WWw0kHNy7nAKyzGmejvlz2XTn13H0elJWV6C3dxhaQy4mtA==",
"version": "7.13.0",
"resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.13.0.tgz",
"integrity": "sha512-T+14VIhB91oJIett5AZ02VWYmz/01VHFWkcAOWiErIQ8AiFhJZoGqTjGxoi8ZpEEBuAj2EGVYojORwLc/+aiDQ==",
"dev": true,
"dependencies": {
"@microsoft/api-extractor-model": "7.12.1",
@ -2019,7 +2019,7 @@
"resolve": "~1.17.0",
"semver": "~7.3.0",
"source-map": "~0.6.1",
"typescript": "~4.0.5"
"typescript": "~4.1.3"
},
"bin": {
"api-extractor": "bin/api-extractor"
@ -2059,19 +2059,6 @@
"node": ">=0.10.0"
}
},
"node_modules/@microsoft/api-extractor/node_modules/typescript": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.5.tgz",
"integrity": "sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==",
"dev": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=4.2.0"
}
},
"node_modules/@microsoft/tsdoc": {
"version": "0.12.24",
"resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.12.24.tgz",
@ -2215,9 +2202,9 @@
}
},
"node_modules/@sinonjs/commons": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.1.tgz",
"integrity": "sha512-892K+kWUUi3cl+LlqEWIDrhvLgdL79tECi8JZUyq6IviKy/DNhuzCRlbHUjxK89f4ypPMMaFnFuR9Ie6DoIMsw==",
"version": "1.8.2",
"resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.2.tgz",
"integrity": "sha512-sruwd86RJHdsVf/AtBoijDmUqJp3B6hF/DGC23C+JaegnDHaZyewCjoVGTdg3J0uz3Zs7NnIT05OBOmML72lQw==",
"dev": true,
"dependencies": {
"type-detect": "4.0.8"
@ -2873,16 +2860,16 @@
"dev": true
},
"node_modules/browserslist": {
"version": "4.16.0",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.0.tgz",
"integrity": "sha512-/j6k8R0p3nxOC6kx5JGAxsnhc9ixaWJfYc+TNTzxg6+ARaESAvQGV7h0uNOB4t+pLQJZWzcrMxXOxjgsCj3dqQ==",
"version": "4.16.1",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.1.tgz",
"integrity": "sha512-UXhDrwqsNcpTYJBTZsbGATDxZbiVDsx6UjpmRUmtnP10pr8wAYr5LgFoEFw9ixriQH2mv/NX2SfGzE/o8GndLA==",
"dev": true,
"dependencies": {
"caniuse-lite": "^1.0.30001165",
"caniuse-lite": "^1.0.30001173",
"colorette": "^1.2.1",
"electron-to-chromium": "^1.3.621",
"electron-to-chromium": "^1.3.634",
"escalade": "^3.1.1",
"node-releases": "^1.1.67"
"node-releases": "^1.1.69"
},
"bin": {
"browserslist": "cli.js"
@ -2978,13 +2965,13 @@
}
},
"node_modules/call-bind": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.0.tgz",
"integrity": "sha512-AEXsYIyyDY3MCzbwdhzG3Jx1R0J2wetQyUynn6dYHAO+bg8l1k7jwZtRv4ryryFs7EP+NDlikJlVe59jr0cM2w==",
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
"dev": true,
"dependencies": {
"function-bind": "^1.1.1",
"get-intrinsic": "^1.0.0"
"get-intrinsic": "^1.0.2"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
@ -3009,9 +2996,9 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001171",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001171.tgz",
"integrity": "sha512-5Alrh8TTYPG9IH4UkRqEBZoEToWRLvPbSQokvzSz0lii8/FOWKG4keO1HoYfPWs8IF/NH/dyNPg1cmJGvV3Zlg==",
"version": "1.0.30001180",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001180.tgz",
"integrity": "sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==",
"dev": true
},
"node_modules/capture-exit": {
@ -3290,12 +3277,12 @@
}
},
"node_modules/core-js-compat": {
"version": "3.8.1",
"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.8.1.tgz",
"integrity": "sha512-a16TLmy9NVD1rkjUGbwuyWkiDoN0FDpAwrfLONvHFQx0D9k7J9y0srwMT8QP/Z6HE3MIFaVynEeYwZwPX1o5RQ==",
"version": "3.8.3",
"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.8.3.tgz",
"integrity": "sha512-1sCb0wBXnBIL16pfFG1Gkvei6UzvKyTNYpiC41yrdjEv0UoJoq9E/abTMzyYJ6JpTkAj15dLjbqifIzEBDVvog==",
"dev": true,
"dependencies": {
"browserslist": "^4.15.0",
"browserslist": "^4.16.1",
"semver": "7.0.0"
},
"funding": {
@ -3357,9 +3344,9 @@
"dev": true
},
"node_modules/csstype": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz",
"integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==",
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz",
"integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==",
"dev": true
},
"node_modules/dashdash": {
@ -3528,9 +3515,9 @@
}
},
"node_modules/electron-to-chromium": {
"version": "1.3.633",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.633.tgz",
"integrity": "sha512-bsVCsONiVX1abkWdH7KtpuDAhsQ3N3bjPYhROSAXE78roJKet0Y5wznA14JE9pzbwSZmSMAW6KiKYf1RvbTJkA==",
"version": "1.3.645",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.645.tgz",
"integrity": "sha512-T7mYop3aDpRHIQaUYcmzmh6j9MAe560n6ukqjJMbVC6bVTau7dSpvB18bcsBPPtOSe10cKxhJFtlbEzLa0LL1g==",
"dev": true
},
"node_modules/emittery": {
@ -4079,9 +4066,9 @@
"dev": true
},
"node_modules/fsevents": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.2.1.tgz",
"integrity": "sha512-bTLYHSeC0UH/EFXS9KqWnXuOl/wHK5Z/d+ghd5AsFMYN7wIGkUCOJyzy88+wJKkZPGON8u4Z9f6U4FdgURE9qA==",
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.1.tgz",
"integrity": "sha512-YR47Eg4hChJGAB1O3yEAOkGO+rlzutoICGqGo9EZ4lKWokzZRSyIW1QmTzqjtw8MJdj9srP869CuWw/hyzSiBw==",
"dev": true,
"hasInstallScript": true,
"optional": true,
@ -4117,9 +4104,9 @@
}
},
"node_modules/get-intrinsic": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.0.2.tgz",
"integrity": "sha512-aeX0vrFm21ILl3+JpFFRNe9aUvp6VFZb2/CTbgLb8j75kOhvoNYjt9d8KA/tJG4gSo8nzEDedRl0h7vDmBYRVg==",
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.0.tgz",
"integrity": "sha512-M11rgtQp5GZMZzDL7jLTNxbDfurpzuau5uqRWDPvlHjfvg3TdScAZo96GLvhMjImrmR8uAt0FS2RLoMrfWGKlg==",
"dev": true,
"dependencies": {
"function-bind": "^1.1.1",
@ -6715,21 +6702,21 @@
}
},
"node_modules/mime-db": {
"version": "1.44.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
"integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==",
"version": "1.45.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.45.0.tgz",
"integrity": "sha512-CkqLUxUk15hofLoLyljJSrukZi8mAtgd+yE5uO4tqRZsdsAJKv0O+rFMhVDRJgozy+yG6md5KwuXhD4ocIoP+w==",
"dev": true,
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.27",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz",
"integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==",
"version": "2.1.28",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.28.tgz",
"integrity": "sha512-0TO2yJ5YHYr7M2zzT7gDU1tbwHxEUWBCLt0lscSNpcdAfFyJOVEpRYNS7EXVcTLNj/25QO8gulHC5JtTzSE2UQ==",
"dev": true,
"dependencies": {
"mime-db": "1.44.0"
"mime-db": "1.45.0"
},
"engines": {
"node": ">= 0.6"
@ -6862,9 +6849,9 @@
}
},
"node_modules/node-releases": {
"version": "1.1.67",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.67.tgz",
"integrity": "sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==",
"version": "1.1.70",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.70.tgz",
"integrity": "sha512-Slf2s69+2/uAD79pVVQo8uSiC34+g8GWY8UH2Qtqv34ZfhYrxpYpfzs9Js9d6O0mbDmALuxaTlplnBTnSELcrw==",
"dev": true
},
"node_modules/normalize-package-data": {
@ -7159,9 +7146,9 @@
}
},
"node_modules/parse-json": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.1.0.tgz",
"integrity": "sha512-+mi/lmVVNKFNVyLXV31ERiy2CY5E1/F6QtJFEzoChPRwwngMNXRDQ9GJ5WdE2Z2P4AujsOi0/+2qHID68KwfIQ==",
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
"integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
"dev": true,
"dependencies": {
"@babel/code-frame": "^7.0.0",
@ -7566,9 +7553,9 @@
"dev": true
},
"node_modules/regjsparser": {
"version": "0.6.4",
"resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.4.tgz",
"integrity": "sha512-64O87/dPDgfk8/RQqC4gkZoGyyWFIEUTTh80CU6CWuK5vkCGyekIx+oKcEIYtP/RAxSQltCZHCNu/mdd7fqlJw==",
"version": "0.6.6",
"resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.6.tgz",
"integrity": "sha512-jjyuCp+IEMIm3N1H1LLTJW1EISEJV9+5oHdEyrt43Pg9cDSb6rrLZei2cVWpl0xTjmmlpec/lEQGYgM7xfpGCQ==",
"dev": true,
"dependencies": {
"jsesc": "~0.5.0"
@ -7790,9 +7777,9 @@
}
},
"node_modules/rollup": {
"version": "2.35.1",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.35.1.tgz",
"integrity": "sha512-q5KxEyWpprAIcainhVy6HfRttD9kutQpHbeqDTWnqAFNJotiojetK6uqmcydNMymBEtC4I8bCYR+J3mTMqeaUA==",
"version": "2.38.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.38.0.tgz",
"integrity": "sha512-ay9zDiNitZK/LNE/EM2+v5CZ7drkB2xyDljvb1fQJCGnq43ZWRkhxN145oV8GmoW1YNi4sA/1Jdkr2LfawJoXw==",
"dev": true,
"dependencies": {
"fsevents": "~2.1.2"
@ -7826,7 +7813,7 @@
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
"integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
"deprecated": "Please update to v 2.2.x",
"deprecated": "\"Please update to latest v2.3 or v2.2\"",
"dev": true,
"hasInstallScript": true,
"optional": true,
@ -9213,9 +9200,9 @@
}
},
"node_modules/uri-js": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.0.tgz",
"integrity": "sha512-B0yRTzYdUCCn9n+F4+Gh4yIDtMQcaJsmYBDsTSG8g/OejKBodLQ2IHfN3bM7jUsRXndopT7OIXWdYqc1fjmV6g==",
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
"integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
"dev": true,
"dependencies": {
"punycode": "^2.1.0"
@ -10663,9 +10650,9 @@
"dev": true
},
"@iconify/core": {
"version": "1.0.0-rc.4",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-rc.4.tgz",
"integrity": "sha512-mKAq58HM1vVPpnwDr751P/ffBDHtwMGkv4I4xZ8rutbvjbZRySGDq9A7/8dglv/1AVSHpCKhWyYUuFQHR3mhpg==",
"version": "1.0.0-rc.5",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-rc.5.tgz",
"integrity": "sha512-1VFvNlBqsX/pMRI3nd00UzEqAS7weayJ/CyCD18b8+kFa9PvoVcGAmob1bTTm++v+QKVqQs+8iQaBFl/DrrsvA==",
"dev": true,
"requires": {
"@cyberalien/redundancy": "^1.1.0",
@ -11165,9 +11152,9 @@
}
},
"@microsoft/api-extractor": {
"version": "7.12.1",
"resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.12.1.tgz",
"integrity": "sha512-lleLrKkqiRvOQeoRMSHQY0wl/j9SxRVd9+Btyh/WWw0kHNy7nAKyzGmejvlz2XTn13H0elJWV6C3dxhaQy4mtA==",
"version": "7.13.0",
"resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.13.0.tgz",
"integrity": "sha512-T+14VIhB91oJIett5AZ02VWYmz/01VHFWkcAOWiErIQ8AiFhJZoGqTjGxoi8ZpEEBuAj2EGVYojORwLc/+aiDQ==",
"dev": true,
"requires": {
"@microsoft/api-extractor-model": "7.12.1",
@ -11180,7 +11167,7 @@
"resolve": "~1.17.0",
"semver": "~7.3.0",
"source-map": "~0.6.1",
"typescript": "~4.0.5"
"typescript": "~4.1.3"
},
"dependencies": {
"semver": {
@ -11197,12 +11184,6 @@
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
},
"typescript": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.5.tgz",
"integrity": "sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==",
"dev": true
}
}
},
@ -11333,9 +11314,9 @@
}
},
"@sinonjs/commons": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.1.tgz",
"integrity": "sha512-892K+kWUUi3cl+LlqEWIDrhvLgdL79tECi8JZUyq6IviKy/DNhuzCRlbHUjxK89f4ypPMMaFnFuR9Ie6DoIMsw==",
"version": "1.8.2",
"resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.2.tgz",
"integrity": "sha512-sruwd86RJHdsVf/AtBoijDmUqJp3B6hF/DGC23C+JaegnDHaZyewCjoVGTdg3J0uz3Zs7NnIT05OBOmML72lQw==",
"dev": true,
"requires": {
"type-detect": "4.0.8"
@ -11881,16 +11862,16 @@
"dev": true
},
"browserslist": {
"version": "4.16.0",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.0.tgz",
"integrity": "sha512-/j6k8R0p3nxOC6kx5JGAxsnhc9ixaWJfYc+TNTzxg6+ARaESAvQGV7h0uNOB4t+pLQJZWzcrMxXOxjgsCj3dqQ==",
"version": "4.16.1",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.1.tgz",
"integrity": "sha512-UXhDrwqsNcpTYJBTZsbGATDxZbiVDsx6UjpmRUmtnP10pr8wAYr5LgFoEFw9ixriQH2mv/NX2SfGzE/o8GndLA==",
"dev": true,
"requires": {
"caniuse-lite": "^1.0.30001165",
"caniuse-lite": "^1.0.30001173",
"colorette": "^1.2.1",
"electron-to-chromium": "^1.3.621",
"electron-to-chromium": "^1.3.634",
"escalade": "^3.1.1",
"node-releases": "^1.1.67"
"node-releases": "^1.1.69"
}
},
"bser": {
@ -11963,13 +11944,13 @@
}
},
"call-bind": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.0.tgz",
"integrity": "sha512-AEXsYIyyDY3MCzbwdhzG3Jx1R0J2wetQyUynn6dYHAO+bg8l1k7jwZtRv4ryryFs7EP+NDlikJlVe59jr0cM2w==",
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
"dev": true,
"requires": {
"function-bind": "^1.1.1",
"get-intrinsic": "^1.0.0"
"get-intrinsic": "^1.0.2"
}
},
"callsites": {
@ -11985,9 +11966,9 @@
"dev": true
},
"caniuse-lite": {
"version": "1.0.30001171",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001171.tgz",
"integrity": "sha512-5Alrh8TTYPG9IH4UkRqEBZoEToWRLvPbSQokvzSz0lii8/FOWKG4keO1HoYfPWs8IF/NH/dyNPg1cmJGvV3Zlg==",
"version": "1.0.30001180",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001180.tgz",
"integrity": "sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==",
"dev": true
},
"capture-exit": {
@ -12223,12 +12204,12 @@
"dev": true
},
"core-js-compat": {
"version": "3.8.1",
"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.8.1.tgz",
"integrity": "sha512-a16TLmy9NVD1rkjUGbwuyWkiDoN0FDpAwrfLONvHFQx0D9k7J9y0srwMT8QP/Z6HE3MIFaVynEeYwZwPX1o5RQ==",
"version": "3.8.3",
"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.8.3.tgz",
"integrity": "sha512-1sCb0wBXnBIL16pfFG1Gkvei6UzvKyTNYpiC41yrdjEv0UoJoq9E/abTMzyYJ6JpTkAj15dLjbqifIzEBDVvog==",
"dev": true,
"requires": {
"browserslist": "^4.15.0",
"browserslist": "^4.16.1",
"semver": "7.0.0"
},
"dependencies": {
@ -12281,9 +12262,9 @@
}
},
"csstype": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz",
"integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==",
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz",
"integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==",
"dev": true
},
"dashdash": {
@ -12410,9 +12391,9 @@
}
},
"electron-to-chromium": {
"version": "1.3.633",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.633.tgz",
"integrity": "sha512-bsVCsONiVX1abkWdH7KtpuDAhsQ3N3bjPYhROSAXE78roJKet0Y5wznA14JE9pzbwSZmSMAW6KiKYf1RvbTJkA==",
"version": "1.3.645",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.645.tgz",
"integrity": "sha512-T7mYop3aDpRHIQaUYcmzmh6j9MAe560n6ukqjJMbVC6bVTau7dSpvB18bcsBPPtOSe10cKxhJFtlbEzLa0LL1g==",
"dev": true
},
"emittery": {
@ -12845,9 +12826,9 @@
"dev": true
},
"fsevents": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.2.1.tgz",
"integrity": "sha512-bTLYHSeC0UH/EFXS9KqWnXuOl/wHK5Z/d+ghd5AsFMYN7wIGkUCOJyzy88+wJKkZPGON8u4Z9f6U4FdgURE9qA==",
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.1.tgz",
"integrity": "sha512-YR47Eg4hChJGAB1O3yEAOkGO+rlzutoICGqGo9EZ4lKWokzZRSyIW1QmTzqjtw8MJdj9srP869CuWw/hyzSiBw==",
"dev": true,
"optional": true
},
@ -12870,9 +12851,9 @@
"dev": true
},
"get-intrinsic": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.0.2.tgz",
"integrity": "sha512-aeX0vrFm21ILl3+JpFFRNe9aUvp6VFZb2/CTbgLb8j75kOhvoNYjt9d8KA/tJG4gSo8nzEDedRl0h7vDmBYRVg==",
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.0.tgz",
"integrity": "sha512-M11rgtQp5GZMZzDL7jLTNxbDfurpzuau5uqRWDPvlHjfvg3TdScAZo96GLvhMjImrmR8uAt0FS2RLoMrfWGKlg==",
"dev": true,
"requires": {
"function-bind": "^1.1.1",
@ -14845,18 +14826,18 @@
}
},
"mime-db": {
"version": "1.44.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
"integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==",
"version": "1.45.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.45.0.tgz",
"integrity": "sha512-CkqLUxUk15hofLoLyljJSrukZi8mAtgd+yE5uO4tqRZsdsAJKv0O+rFMhVDRJgozy+yG6md5KwuXhD4ocIoP+w==",
"dev": true
},
"mime-types": {
"version": "2.1.27",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz",
"integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==",
"version": "2.1.28",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.28.tgz",
"integrity": "sha512-0TO2yJ5YHYr7M2zzT7gDU1tbwHxEUWBCLt0lscSNpcdAfFyJOVEpRYNS7EXVcTLNj/25QO8gulHC5JtTzSE2UQ==",
"dev": true,
"requires": {
"mime-db": "1.44.0"
"mime-db": "1.45.0"
}
},
"mimic-fn": {
@ -14967,9 +14948,9 @@
}
},
"node-releases": {
"version": "1.1.67",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.67.tgz",
"integrity": "sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==",
"version": "1.1.70",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.70.tgz",
"integrity": "sha512-Slf2s69+2/uAD79pVVQo8uSiC34+g8GWY8UH2Qtqv34ZfhYrxpYpfzs9Js9d6O0mbDmALuxaTlplnBTnSELcrw==",
"dev": true
},
"normalize-package-data": {
@ -15190,9 +15171,9 @@
"dev": true
},
"parse-json": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.1.0.tgz",
"integrity": "sha512-+mi/lmVVNKFNVyLXV31ERiy2CY5E1/F6QtJFEzoChPRwwngMNXRDQ9GJ5WdE2Z2P4AujsOi0/+2qHID68KwfIQ==",
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
"integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.0.0",
@ -15520,9 +15501,9 @@
"dev": true
},
"regjsparser": {
"version": "0.6.4",
"resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.4.tgz",
"integrity": "sha512-64O87/dPDgfk8/RQqC4gkZoGyyWFIEUTTh80CU6CWuK5vkCGyekIx+oKcEIYtP/RAxSQltCZHCNu/mdd7fqlJw==",
"version": "0.6.6",
"resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.6.tgz",
"integrity": "sha512-jjyuCp+IEMIm3N1H1LLTJW1EISEJV9+5oHdEyrt43Pg9cDSb6rrLZei2cVWpl0xTjmmlpec/lEQGYgM7xfpGCQ==",
"dev": true,
"requires": {
"jsesc": "~0.5.0"
@ -15690,9 +15671,9 @@
}
},
"rollup": {
"version": "2.35.1",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.35.1.tgz",
"integrity": "sha512-q5KxEyWpprAIcainhVy6HfRttD9kutQpHbeqDTWnqAFNJotiojetK6uqmcydNMymBEtC4I8bCYR+J3mTMqeaUA==",
"version": "2.38.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.38.0.tgz",
"integrity": "sha512-ay9zDiNitZK/LNE/EM2+v5CZ7drkB2xyDljvb1fQJCGnq43ZWRkhxN145oV8GmoW1YNi4sA/1Jdkr2LfawJoXw==",
"dev": true,
"requires": {
"fsevents": "~2.1.2"
@ -16827,9 +16808,9 @@
}
},
"uri-js": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.0.tgz",
"integrity": "sha512-B0yRTzYdUCCn9n+F4+Gh4yIDtMQcaJsmYBDsTSG8g/OejKBodLQ2IHfN3bM7jUsRXndopT7OIXWdYqc1fjmV6g==",
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
"integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
"dev": true,
"requires": {
"punycode": "^2.1.0"

2
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-rc.4",
"version": "2.0.0-rc.5",
"license": "MIT",
"bugs": "https://github.com/iconify/iconify/issues",
"homepage": "https://iconify.design/",

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

@ -1,13 +1,14 @@
import { HTMLProps, SVGProps, createElement } from 'react';
import { IconifyIcon, IconifyJSON } from '@iconify/types';
import {
import type { HTMLProps, SVGProps } from 'react';
import React from 'react';
import type { IconifyIcon, IconifyJSON } from '@iconify/types';
import type {
IconifyIconCustomisations as IconCustomisations,
FullIconCustomisations,
defaults,
IconifyHorizontalIconAlignment,
IconifyVerticalIconAlignment,
IconifyIconSize,
} from '@iconify/core/lib/customisations';
import { defaults } from '@iconify/core/lib/customisations';
import {
flipFromString,
alignmentFromString,
@ -95,7 +96,8 @@ const storage: Record<string, Required<IconifyIcon>> = Object.create(null);
*/
const component = (
props: IconProps,
defaults: FullIconCustomisations
defaults: FullIconCustomisations,
ref
): JSX.Element => {
// Split properties
const icon =
@ -112,6 +114,9 @@ const component = (
) as FullIconCustomisations;
const componentProps = merge(svgDefaults);
// Add reference
componentProps.ref = ref;
// Create style if missing
const style = typeof props.style === 'object' ? props.style : {};
componentProps.style = style;
@ -182,7 +187,7 @@ const component = (
style.verticalAlign = '-0.125em';
}
return createElement('svg', componentProps);
return React.createElement('svg', componentProps);
};
/**
@ -190,15 +195,18 @@ const component = (
*
* @param props - Component properties
*/
export const Icon = (props: IconProps) => component(props, defaults);
export const Icon = React.forwardRef((props: IconProps, ref) =>
component(props, defaults, ref)
);
/**
* Inline icon (has negative verticalAlign that makes it behave like icon font)
*
* @param props - Component properties
*/
export const InlineIcon = (props: IconProps) =>
component(props, inlineDefaults);
export const InlineIcon = React.forwardRef((props: IconProps, ref) =>
component(props, inlineDefaults, ref)
);
/**
* Add icon to storage, allowing to call it by name

1
packages/react/tsconfig.json
View File

@ -9,6 +9,7 @@
"strict": false,
"moduleResolution": "node",
"esModuleInterop": true,
"importsNotUsedAsValues": "error",
"forceConsistentCasingInFileNames": true
}
}