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

Use ES icon components instead of CommonJS in Svelte and Svelte / Sapper demo, update dependencies

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2020-08-22 18:19:04 +03:00
parent 5c87d82108
commit ac8eab9510
16 changed files with 93 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,16 +25,16 @@
}
},
"@babel/core": {
"version": "7.11.1",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.11.1.tgz",
"integrity": "sha512-XqF7F6FWQdKGGWAzGELL+aCO1p+lRY5Tj5/tbT3St1G8NaH70jhhDIKknIZaDans0OQBG5wRAldROLHSt44BgQ==",
"version": "7.11.4",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.11.4.tgz",
"integrity": "sha512-5deljj5HlqRXN+5oJTY7Zs37iH3z3b++KjiKtIsJy1NrjOOVSEaJHEetLBhyu0aQOSNNZ/0IuEAan9GzRuDXHg==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.10.4",
"@babel/generator": "^7.11.0",
"@babel/generator": "^7.11.4",
"@babel/helper-module-transforms": "^7.11.0",
"@babel/helpers": "^7.10.4",
"@babel/parser": "^7.11.1",
"@babel/parser": "^7.11.4",
"@babel/template": "^7.10.4",
"@babel/traverse": "^7.11.0",
"@babel/types": "^7.11.0",
@ -48,13 +48,15 @@
"source-map": "^0.5.0"
},
"dependencies": {
"@babel/code-frame": {
"version": "7.10.4",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
"integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
"@babel/generator": {
"version": "7.11.4",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.11.4.tgz",
"integrity": "sha512-Rn26vueFx0eOoz7iifCN2UHT6rGtnkSGWSoDRIy8jZN3B91PzeSULbswfLoOWuTuAcNwpG/mxy+uCTDnZ9Mp1g==",
"dev": true,
"requires": {
"@babel/highlight": "^7.10.4"
"@babel/types": "^7.11.0",
"jsesc": "^2.5.1",
"source-map": "^0.5.0"
}
},
"@babel/helper-validator-identifier": {
@ -63,21 +65,10 @@
"integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==",
"dev": true
},
"@babel/highlight": {
"version": "7.10.4",
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
"integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
"dev": true,
"requires": {
"@babel/helper-validator-identifier": "^7.10.4",
"chalk": "^2.0.0",
"js-tokens": "^4.0.0"
}
},
"@babel/parser": {
"version": "7.11.3",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.3.tgz",
"integrity": "sha512-REo8xv7+sDxkKvoxEywIdsNFiZLybwdI7hcT5uEPyQrSMB4YQ973BfC9OOrD/81MaIjh6UxdulIQXkjmiH3PcA==",
"version": "7.11.4",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.11.4.tgz",
"integrity": "sha512-MggwidiH+E9j5Sh8pbrX5sJvMcsqS5o+7iB42M9/k0CD63MjYbdP4nhSh7uB5wnv2/RVzTZFTxzF/kIa5mrCqA==",
"dev": true
},
"@babel/types": {
@ -2163,6 +2154,18 @@
"integrity": "sha512-/tx5GpGSyMn5FrOSggDSm9yJDLcEXiK0+zdCBssST6w9QgdJjoQ9lRBSxql/3vgQoI+7XbubWsP86jjbuVnFcA==",
"dev": true
},
"@iconify-icons/bi": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@iconify-icons/bi/-/bi-1.0.0.tgz",
"integrity": "sha512-vkOhS7Inh3//WPcMQ2khjjE/E+iXMtlezrQfducw2540ZxrmPYFvRAkImmNgyvnZ+8Qq/Ib7EIABqXCw4WmtiQ==",
"dev": true
},
"@iconify-icons/openmoji": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@iconify-icons/openmoji/-/openmoji-1.0.0.tgz",
"integrity": "sha512-vc++cR+OrqdRCasSzwV+HoNfaHzdMfcdHy0Pw47KlQ4Aclbr5yqJ+fsMp2LPco9z/ZAmDNXkeqlDqx8lCH0CLw==",
"dev": true
},
"@iconify/core": {
"version": "1.0.0-beta.4",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-beta.4.tgz",
@ -2174,22 +2177,10 @@
"axios": "^0.19.2"
}
},
"@iconify/icons-bi": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/@iconify/icons-bi/-/icons-bi-1.0.6.tgz",
"integrity": "sha512-0I/qawqj68W7T80srg0KxxsjgFnmAXsc2Y5lCJnz4y/tHCWFS0qy3q/habBfQtrmiXVKNul98nd2/fXy87iSww==",
"dev": true
},
"@iconify/icons-openmoji": {
"version": "1.0.64",
"resolved": "https://registry.npmjs.org/@iconify/icons-openmoji/-/icons-openmoji-1.0.64.tgz",
"integrity": "sha512-mdgMjMoE6xNm9ddty+NGkqmC0GDuz8i3gNPnEj2f0QE32rS+oSyp2OZIO7EPdPu1X2xG7UKVierGQQcpxoZZBg==",
"dev": true
},
"@iconify/svelte": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-1.0.1.tgz",
"integrity": "sha512-FlHDKjToGj53vCa4YPFaU1onjzD7phZryeDC+z07EUdn+gkg0dOFkip4AJU9zJbEw590UAuUoRV7XFXr7vPg0g==",
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-1.0.2.tgz",
"integrity": "sha512-w4LCok0+uZRROim7vE5aY2jkg7XxuIA1wp9g88Rgh/54wbrWvbUwzPuJtLF+plnvvb5Y0P1F/ljp5HGlHBrvpw==",
"dev": true,
"requires": {
"@iconify/core": "^1.0.0-beta.4",
@ -3210,9 +3201,9 @@
}
},
"rollup": {
"version": "2.25.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.25.0.tgz",
"integrity": "sha512-S+OzytEaqcLugXAqesmJMb1Q16I6h1ps8F3AOX7yMZ1OkkuOATJH/x2lqJJtjQo2/d+0J4j62M2RbvgmxvOuCw==",
"version": "2.26.5",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.5.tgz",
"integrity": "sha512-rCyFG3ZtQdnn9YwfuAVH0l/Om34BdO5lwCA0W6Hq+bNB21dVEBbCRxhaHOmu1G7OBFDWytbzAC104u7rxHwGjA==",
"dev": true,
"requires": {
"fsevents": "~2.1.2"

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

@ -17,19 +17,19 @@
"sirv": "^0.4.6"
},
"devDependencies": {
"@babel/core": "^7.11.1",
"@babel/core": "^7.11.4",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.11.0",
"@babel/preset-env": "^7.11.0",
"@babel/runtime": "^7.11.2",
"@iconify/icons-bi": "^1.0.6",
"@iconify/icons-openmoji": "^1.0.64",
"@iconify/svelte": "^1.0.1",
"@iconify-icons/bi": "^1.0.0",
"@iconify-icons/openmoji": "^1.0.0",
"@iconify/svelte": "^1.0.2",
"@rollup/plugin-commonjs": "11.0.2",
"@rollup/plugin-node-resolve": "^7.0.0",
"@rollup/plugin-replace": "^2.3.3",
"npm-run-all": "^4.1.5",
"rollup": "^2.25.0",
"rollup": "^2.26.5",
"rollup-plugin-babel": "^4.0.2",
"rollup-plugin-svelte": "^5.2.3",
"rollup-plugin-terser": "^7.0.0",

6
packages/sapper-demo/src/components/Nav.svelte
View File

@ -1,8 +1,8 @@
<script>
import IconifyIcon from '@iconify/svelte';
import homeIcon from '@iconify/icons-bi/house-door';
import blogIcon from '@iconify/icons-bi/file-text';
import aboutIcon from '@iconify/icons-bi/question-octagon';
import homeIcon from '@iconify-icons/bi/house-door';
import blogIcon from '@iconify-icons/bi/file-text';
import aboutIcon from '@iconify-icons/bi/question-octagon';
export let segment;
</script>

2
packages/sapper-demo/src/routes/blog/index.svelte
View File

@ -18,7 +18,7 @@
onMount(async () => {
const promises = [
import('@iconify/svelte'),
import('@iconify/icons-bi/link-45deg'),
import('@iconify-icons/bi/link-45deg'),
];
const results = await Promise.all(promises);
IconifyIcon = results[0].default;

4
packages/sapper-demo/src/routes/index.svelte
View File

@ -1,7 +1,7 @@
<script>
// Render icon on server
import IconifyIcon from '@iconify/svelte';
import successIcon from '@iconify/icons-openmoji/artist-medium-light-skin-tone';
import successIcon from '@iconify-icons/openmoji/artist-medium-light-skin-tone';
// Dynamically load icon component, icon data and render it on client side
// Also replace <IconifyIcon /> with <svelte:component this={IconifyIcon} />
@ -14,7 +14,7 @@
onMount(async () => {
let promises = [
import('@iconify/svelte'),
import('@iconify/icons-openmoji/artist-medium-light-skin-tone'),
import('@iconify-icons/openmoji/artist-medium-light-skin-tone'),
];
const results = await Promise.all(promises);
IconifyIcon = results[0].default;

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

@ -36,6 +36,18 @@
"integrity": "sha512-/tx5GpGSyMn5FrOSggDSm9yJDLcEXiK0+zdCBssST6w9QgdJjoQ9lRBSxql/3vgQoI+7XbubWsP86jjbuVnFcA==",
"dev": true
},
"@iconify-icons/bx": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@iconify-icons/bx/-/bx-1.0.0.tgz",
"integrity": "sha512-1+a3dZNBsalLDAu+BTilIFYlH/S6SfUnchTH+ZPZxr+p2sPWNYtyDKD0hUdcguUFaTh4h1oy5H6yNya9Gb6q+w==",
"dev": true
},
"@iconify-icons/dashicons": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@iconify-icons/dashicons/-/dashicons-1.0.0.tgz",
"integrity": "sha512-oLc7ufxyswT8JeVj1Mu6ySEb8ktqJobTxw8LeTc+mbrPv1GKAg0ORYV+QSRRAfNyiKnkDzwl5W82XSKN+ax2Cg==",
"dev": true
},
"@iconify/core": {
"version": "1.0.0-beta.4",
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-beta.4.tgz",
@ -47,22 +59,10 @@
"axios": "^0.19.2"
}
},
"@iconify/icons-bx": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@iconify/icons-bx/-/icons-bx-1.0.3.tgz",
"integrity": "sha512-CgqM+XcypQDRCmuTZj3SlbZUGr0uK69vFc7GeBfJUKBZW/yelZ35I6ot1tVpkF/UrQebpRGRDmOFGRp/3z/SnQ==",
"dev": true
},
"@iconify/icons-dashicons": {
"version": "1.0.11",
"resolved": "https://registry.npmjs.org/@iconify/icons-dashicons/-/icons-dashicons-1.0.11.tgz",
"integrity": "sha512-/yZHSeeh8DxZdQZe7tZ0mWZ8mKPvLEjpbjd5p1dk+qyEJ26pcZNT4x6ZXHfGtAG+FDjDGMWRMxcDP/lvFI35iA==",
"dev": true
},
"@iconify/svelte": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-1.0.1.tgz",
"integrity": "sha512-FlHDKjToGj53vCa4YPFaU1onjzD7phZryeDC+z07EUdn+gkg0dOFkip4AJU9zJbEw590UAuUoRV7XFXr7vPg0g==",
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-1.0.2.tgz",
"integrity": "sha512-w4LCok0+uZRROim7vE5aY2jkg7XxuIA1wp9g88Rgh/54wbrWvbUwzPuJtLF+plnvvb5Y0P1F/ljp5HGlHBrvpw==",
"dev": true,
"requires": {
"@iconify/core": "^1.0.0-beta.4",
@ -528,9 +528,9 @@
}
},
"rollup": {
"version": "2.25.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.25.0.tgz",
"integrity": "sha512-S+OzytEaqcLugXAqesmJMb1Q16I6h1ps8F3AOX7yMZ1OkkuOATJH/x2lqJJtjQo2/d+0J4j62M2RbvgmxvOuCw==",
"version": "2.26.5",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.5.tgz",
"integrity": "sha512-rCyFG3ZtQdnn9YwfuAVH0l/Om34BdO5lwCA0W6Hq+bNB21dVEBbCRxhaHOmu1G7OBFDWytbzAC104u7rxHwGjA==",
"dev": true,
"requires": {
"fsevents": "~2.1.2"

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

@ -8,12 +8,12 @@
"start": "sirv public"
},
"devDependencies": {
"@iconify/icons-bx": "^1.0.3",
"@iconify/icons-dashicons": "^1.0.11",
"@iconify/svelte": "^1.0.1",
"@iconify-icons/bx": "^1.0.0",
"@iconify-icons/dashicons": "^1.0.0",
"@iconify/svelte": "^1.0.2",
"@rollup/plugin-commonjs": "11.0.2",
"@rollup/plugin-node-resolve": "^7.0.0",
"rollup": "^2.25.0",
"rollup": "^2.26.5",
"rollup-plugin-livereload": "^1.0.0",
"rollup-plugin-svelte": "^5.2.3",
"rollup-plugin-terser": "^7.0.0",

6
packages/svelte-demo/src/App.svelte
View File

@ -1,8 +1,8 @@
<script>
import Icon from '@iconify/svelte';
import adminCustomizer from '@iconify/icons-dashicons/admin-customizer';
import bxUser from '@iconify/icons-bx/bx-user';
import bxError from '@iconify/icons-bx/bx-error';
import adminCustomizer from '@iconify-icons/dashicons/admin-customizer';
import bxUser from '@iconify-icons/bx/bx-user';
import bxError from '@iconify-icons/bx/bx-error';
import UsageSample from './components/Sample.svelte';
import ColorStyle from './components/ColorStyle.svelte';

2
packages/svelte-demo/src/components/Alignment.svelte
View File

@ -1,6 +1,6 @@
<script>
import Icon from '@iconify/svelte';
import paperclipIcon from '@iconify/icons-dashicons/paperclip';
import paperclipIcon from '@iconify-icons/dashicons/paperclip';
</script>
<style>

2
packages/svelte-demo/src/components/ColorStyle.svelte
View File

@ -1,6 +1,6 @@
<script>
import Icon from '@iconify/svelte';
import adminUsers from '@iconify/icons-dashicons/admin-users';
import adminUsers from '@iconify-icons/dashicons/admin-users';
let icon1Style = 'color: purple; vertical-align: 0; font-size: 2em;';
</script>

2
packages/svelte-demo/src/components/Sample.svelte
View File

@ -1,6 +1,6 @@
<script>
import Icon from '@iconify/svelte';
import adminCustomizer from '@iconify/icons-dashicons/admin-customizer';
import adminCustomizer from '@iconify-icons/dashicons/admin-customizer';
</script>
<Icon icon={adminCustomizer} height="20" style="color: green;" />

2
packages/svelte-demo/src/components/Style.svelte
View File

@ -1,6 +1,6 @@
<script>
import Icon from '@iconify/svelte';
import paperclipIcon from '@iconify/icons-dashicons/paperclip';
import paperclipIcon from '@iconify-icons/dashicons/paperclip';
const redIcon = 'color: red;';
const bigIcon = 'font-size: 40px;';

2
packages/svelte-demo/src/components/Transformations.svelte
View File

@ -1,6 +1,6 @@
<script>
import Icon from '@iconify/svelte';
import paperclipIcon from '@iconify/icons-dashicons/paperclip';
import paperclipIcon from '@iconify-icons/dashicons/paperclip';
</script>
<style>

28
packages/svelte/README.md
View File

@ -43,8 +43,8 @@ Install `@iconify/svelte` and packages for selected icon sets. Import component
```js
import IconifyIcon from '@iconify/svelte';
import home from '@iconify/icons-mdi/home';
import faceWithMonocle from '@iconify/icons-twemoji/face-with-monocle';
import home from '@iconify-icons/mdi/home';
import faceWithMonocle from '@iconify-icons/twemoji/face-with-monocle';
```
Then use component with icon data as "icon" parameter:
@ -170,7 +170,7 @@ Using Svelte scoped style:
```jsx
<script>
import IconifyIcon from '@iconify/svelte';
import alertIcon from '@iconify/icons-mdi/alert';
import alertIcon from '@iconify-icons/mdi/alert';
</script>
<style>
@ -336,7 +336,7 @@ Example:
onMount(async () => {
const promises = [
import('@iconify/svelte'), // Component
import('@iconify/icons-bi/link-45deg'), // Icon #1
import('@iconify-icons/bi/link-45deg'), // Icon #1
];
const results = await Promise.all(promises);
IconifyIcon = results[0].default; // Component
@ -368,20 +368,20 @@ You can find all available icons at https://iconify.design/icon-sets/
Browse or search icons, click any icon and you will see a "Svelte" tab that will give you exact code for the Svelte component.
Import format for each icon is "@iconify/icon-{prefix}/{icon}" where {prefix} is collection prefix, and {icon} is the icon name.
Import format for each icon is "@iconify-icons/{prefix}/{icon}" where {prefix} is collection prefix, and {icon} is the icon name.
Usage examples for a few popular icon sets:
### Bootstrap Icons
Package: https://www.npmjs.com/package/@iconify/icons-bi
Package: https://www.npmjs.com/package/@iconify-icons/bi
Icons list: https://iconify.design/icon-sets/bi/
Installation:
```bash
npm install --save-dev @iconify/icons-bi
npm install --save-dev @iconify-icons/bi
```
Usage:
@ -389,7 +389,7 @@ Usage:
```svelte
<script>
import IconifyIcon from '@iconify/svelte';
import awardIcon from '@iconify/icons-bi/award';
import awardIcon from '@iconify-icons/bi/award';
function handleClick() {
alert('Award link clicked!');
@ -406,14 +406,14 @@ function handleClick() {
### Remix Icons
Package: https://www.npmjs.com/package/@iconify/icons-ri
Package: https://www.npmjs.com/package/@iconify-icons/ri
Icons list: https://iconify.design/icon-sets/ri/
Installation:
```bash
npm install --save-dev @iconify/icons-ri
npm install --save-dev @iconify-icons/ri
```
Usage:
@ -421,7 +421,7 @@ Usage:
```html
<script>
import IconifyIcon from '@iconify/svelte';
import alertLine from '@iconify/icons-ri/alert-line';
import alertLine from '@iconify-icons/ri/alert-line';
</script>
<style>
@ -458,14 +458,14 @@ Usage:
### Simple Icons (big collection of logos)
Package: https://www.npmjs.com/package/@iconify/icons-simple-icons
Package: https://www.npmjs.com/package/@iconify-icons/simple-icons
Icons list: https://iconify.design/icon-sets/simple-icons/
Installation:
```bash
npm install --save-dev @iconify/icons-simple-icons
npm install --save-dev @iconify-icons/simple-icons
```
Usage (in this example using string syntax):
@ -473,7 +473,7 @@ Usage (in this example using string syntax):
```jsx
<script>
import IconifyIcon from '@iconify/svelte';
import mozillafirefoxIcon from '@iconify/icons-simple-icons/mozillafirefox';
import mozillafirefoxIcon from '@iconify-icons/simple-icons/mozillafirefox';
</script>
<p>

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

@ -1,6 +1,6 @@
{
"name": "@iconify/svelte",
"version": "1.0.1",
"version": "1.0.2",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -310,9 +310,9 @@
}
},
"rollup": {
"version": "2.25.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.25.0.tgz",
"integrity": "sha512-S+OzytEaqcLugXAqesmJMb1Q16I6h1ps8F3AOX7yMZ1OkkuOATJH/x2lqJJtjQo2/d+0J4j62M2RbvgmxvOuCw==",
"version": "2.26.5",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.5.tgz",
"integrity": "sha512-rCyFG3ZtQdnn9YwfuAVH0l/Om34BdO5lwCA0W6Hq+bNB21dVEBbCRxhaHOmu1G7OBFDWytbzAC104u7rxHwGjA==",
"dev": true,
"requires": {
"fsevents": "~2.1.2"

2
packages/svelte/package.json
View File

@ -25,7 +25,7 @@
"devDependencies": {
"@rollup/plugin-commonjs": "^11.1.0",
"@rollup/plugin-node-resolve": "^7.1.3",
"rollup": "^2.25.0",
"rollup": "^2.26.5",
"rollup-plugin-svelte": "^5.2.3",
"svelte": "^3.24.1"
}