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

chore: update svelte demo packages

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2023-12-23 10:49:49 +02:00
parent e1dc2fe25f
commit 1c39d19339
12 changed files with 245 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components-demo/svelte-demo-vite/package.json
View File

@ -10,7 +10,6 @@
"check": "svelte-check --tsconfig ./tsconfig.json"
},
"devDependencies": {
"@iconify-icons/mdi-light": "^1.2.5",
"@iconify/svelte": "workspace:*",
"@sveltejs/vite-plugin-svelte": "^2.5.3",
"@tsconfig/svelte": "^5.0.2",

15
components-demo/svelte-demo-vite/src/App.svelte
View File

@ -6,9 +6,6 @@
disableCache,
} from '@iconify/svelte';
import presentationPlay from '@iconify-icons/mdi-light/presentation-play';
import playIcon from '@iconify-icons/mdi-light/play';
import Checkbox from './lib/Checkbox.svelte';
import InlineDemo from './lib/Inline.svelte';
import OfflineUsageDemo from './lib/UsageOffline.svelte';
@ -19,10 +16,18 @@
disableCache('all');
// Add 'mdi-light:presentation-play' as 'demo' for offline module
addOfflineIcon('demo', presentationPlay);
addOfflineIcon('demo', {
body: "<path fill=\"currentColor\" d=\"M2 4h8a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1h8v1h-1v11h-5.73l1.61 6h-1.04l-1.61-6H9.77l-1.61 6H7.12l1.61-6H3V5H2zm17 11V5H4v10zm-9-8h1l3 3l-3 3h-1zm1 1.41v3.18L12.59 10z\"/>",
width: 24,
height: 24
});
// Add 'mdi-light:play' as 'demo' for full module
addOnlineIcon('demo', playIcon);
addOnlineIcon('demo', {
body: "<path fill=\"currentColor\" d=\"M18.4 12.5L9 18.38L8 19V6zm-1.9 0L9 7.8v9.4z\"/>",
width: 24,
height: 24
});
// Add custom icon as 'experiment'
addOfflineIcon('experiment2', {

5
components-demo/svelte-demo-vite/src/lib/Checkbox.svelte
View File

@ -11,7 +11,7 @@
width: 24,
height: 24
})
export let checked = false;
export let text = '';
export let hint = '';
@ -34,4 +34,5 @@
<div class="checkbox-container">
<a href="# " class={className} on:click|preventDefault={toggle}><Icon icon={icon} mode={checked ? 'svg' : 'style'} />{text}</a>
<small>{hint}</small>
</div>
<Icon />
</div>

17
components-demo/svelte-demo-vite/src/lib/UsageFullOffline.svelte
View File

@ -1,7 +1,16 @@
<script>
import Icon from '@iconify/svelte';
import accountIcon from '@iconify-icons/mdi-light/account';
import alertIcon from '@iconify-icons/mdi-light/alert';
<script lang="ts">
import Icon, { type IconifyIcon } from '@iconify/svelte';
const accountIcon: IconifyIcon = {
body: "<path fill=\"currentColor\" d=\"M11.5 14c4.14 0 7.5 1.57 7.5 3.5V20H4v-2.5c0-1.93 3.36-3.5 7.5-3.5m6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13zM11.5 5A3.5 3.5 0 0 1 15 8.5a3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 8 8.5A3.5 3.5 0 0 1 11.5 5m0 1A2.5 2.5 0 0 0 9 8.5a2.5 2.5 0 0 0 2.5 2.5A2.5 2.5 0 0 0 14 8.5A2.5 2.5 0 0 0 11.5 6\"/>",
width: 24,
height: 24
};
const alertIcon: IconifyIcon = {
body: "<path fill=\"currentColor\" d=\"M1 21L11.5 2.81L22 21zm19.27-1L11.5 4.81L2.73 20zM11 14v-4h1v4zm0 2h1v2h-1z\"/>",
width: 24,
height: 24
}
</script>
<section class="icon-24">

17
components-demo/svelte-demo-vite/src/lib/UsageOffline.svelte
View File

@ -1,7 +1,16 @@
<script>
import Icon from '@iconify/svelte/dist/OfflineIcon.svelte';
import accountIcon from '@iconify-icons/mdi-light/account';
import alertIcon from '@iconify-icons/mdi-light/alert';
<script lang="ts">
import Icon, { type IconifyIcon } from '@iconify/svelte/dist/OfflineIcon.svelte';
const accountIcon: IconifyIcon = {
body: "<path fill=\"currentColor\" d=\"M11.5 14c4.14 0 7.5 1.57 7.5 3.5V20H4v-2.5c0-1.93 3.36-3.5 7.5-3.5m6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13zM11.5 5A3.5 3.5 0 0 1 15 8.5a3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 8 8.5A3.5 3.5 0 0 1 11.5 5m0 1A2.5 2.5 0 0 0 9 8.5a2.5 2.5 0 0 0 2.5 2.5A2.5 2.5 0 0 0 14 8.5A2.5 2.5 0 0 0 11.5 6\"/>",
width: 24,
height: 24
};
const alertIcon: IconifyIcon = {
body: "<path fill=\"currentColor\" d=\"M1 21L11.5 2.81L22 21zm19.27-1L11.5 4.81L2.73 20zM11 14v-4h1v4zm0 2h1v2h-1z\"/>",
width: 24,
height: 24
}
</script>
<section class="icon-24">

39
components-demo/svelte-demo-vite/tsconfig.json
View File

@ -1,19 +1,24 @@
{
"extends": "@tsconfig/svelte/tsconfig.json",
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"resolveJsonModule": true,
"baseUrl": ".",
/**
* Typecheck JS in `.svelte` and `.js` files by default.
* Disable checkJs if you'd like to use dynamic types in JS.
* Note that setting allowJs false does not prevent the use
* of JS in `.svelte` files.
*/
"allowJs": true,
"checkJs": true
},
"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
"extends": "@tsconfig/svelte/tsconfig.json",
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"resolveJsonModule": true,
"baseUrl": ".",
/**
* Typecheck JS in `.svelte` and `.js` files by default.
* Disable checkJs if you'd like to use dynamic types in JS.
* Note that setting allowJs false does not prevent the use
* of JS in `.svelte` files.
*/
"allowJs": true,
"checkJs": true
},
"include": [
"src/**/*.d.ts",
"src/**/*.ts",
"src/**/*.js",
"src/**/*.svelte"
]
}

1
components-demo/sveltekit-demo/package.json
View File

@ -9,7 +9,6 @@
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
},
"devDependencies": {
"@iconify-icons/mdi-light": "^1.2.5",
"@iconify/svelte": "workspace:*",
"@sveltejs/adapter-auto": "next",
"@sveltejs/kit": "next",

5
components/svelte/src/svelte.d.ts vendored
View File

@ -5,8 +5,5 @@ import type { SvelteHTMLElements } from 'svelte/elements';
* Svelte component
*/
export default class Icon extends SvelteComponent<
SvelteHTMLElements['svg'] &
SvelteHTMLElements['span'] &
IconProps &
Record<`data-${string}`, string>
SvelteHTMLElements['svg'] & IconProps & Record<`data-${string}`, string>
> {}

1
iconify-icon-demo/svelte-demo/package.json
View File

@ -10,7 +10,6 @@
"check": "svelte-check --tsconfig ./tsconfig.json"
},
"devDependencies": {
"@iconify-icons/mdi-light": "^1.2.5",
"@sveltejs/vite-plugin-svelte": "^2.5.3",
"@tsconfig/svelte": "^5.0.2",
"iconify-icon": "workspace:*",

8
iconify-icon-demo/svelte-demo/src/lib/Counter.svelte
View File

@ -1,5 +1,11 @@
<script lang="ts">
import plusIcon from '@iconify-icons/mdi-light/plus';
import { type IconifyIcon } from 'iconify-icon'
const plusIcon: IconifyIcon = {
body: "<path fill=\"currentColor\" d=\"M5 13v-1h6V6h1v6h6v1h-6v6h-1v-6z\"/>",
width: 24,
height: 24
}
let count: number = 0

2
iconify-icon-demo/sveltekit-demo/package.json
View File

@ -2,6 +2,7 @@
"name": "@iconify-icon/sveltekit-demo",
"version": "0.0.1",
"scripts": {
"prepare": "svelte-kit sync",
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
@ -9,7 +10,6 @@
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
},
"devDependencies": {
"@iconify-icons/mdi-light": "^1.2.5",
"@sveltejs/adapter-auto": "next",
"@sveltejs/kit": "next",
"@types/cookie": "^0.6.0",

441
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff