mirror of
https://github.com/iconify/iconify.git
synced 2024-09-29 05:29:09 +00:00
chore: fix svelte component for svelte 4 types
This commit is contained in:
Vjacheslav Trushkin
parent
1ed4fab53f
commit
4161317149
@ -153,7 +153,6 @@ Directory `components-demo` contains demo packages that show usage of icon compo
|
||||
- [Vue 3 demo](./components-demo/vue-demo/) - demo for Vue 3 component. Run `npm run dev` to start demo.
|
||||
- [Nuxt 3 demo](./components-demo/nuxt3-demo/) - demo for Vue 3 component with Nuxt. Run `npm run dev` to start demo.
|
||||
- [Vue 2 demo](./components-demo/vue2-demo/) - demo for Vue 2 component. Run `npm run build` to build demo and `npm run serve` to start it.
|
||||
- [Svelte demo](./components-demo/svelte-demo/) - demo for Svelte component. Run `npm run dev` to start demo.
|
||||
- [Svelte demo with Vite](./components-demo/svelte-demo-vite/) - demo for Svelte component using Vite. Run `npm run dev` to start demo.
|
||||
- [SvelteKit demo](./components-demo/sveltekit-demo/) - demo for SvelteKit, using Svelte component on the server and in the browser. Run `npm run dev` to start the demo.
|
||||
- [Ember demo](./components-demo/ember-demo/) - demo for Ember component. Run `npm run build` to build demo and `npm run start` to start it.
|
||||
|
||||
@ -1,13 +1,177 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Svelte + TS + Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Svelte + TS + Vite App</title>
|
||||
<style>
|
||||
main {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: left;
|
||||
color: #2c3e50;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
section {
|
||||
border-bottom: 1px dotted #ccc;
|
||||
padding: 16px;
|
||||
}
|
||||
section:last-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
section:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
h1,
|
||||
h2 {
|
||||
margin: 0 0 16px;
|
||||
padding: 0;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
h2 {
|
||||
margin: 16px 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
h1 + h2 {
|
||||
margin-top: -8px;
|
||||
}
|
||||
p {
|
||||
margin: 12px 0 4px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Tests */
|
||||
.test-row {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.test-row-icons {
|
||||
padding-right: 4px;
|
||||
}
|
||||
.test-row-icons > :is(svg, span) {
|
||||
color: #afafaf;
|
||||
display: none;
|
||||
}
|
||||
.test-row-icons > :is(svg, span).visible {
|
||||
display: inline-block;
|
||||
}
|
||||
.test-row-icons > :is(svg, span).success {
|
||||
color: #327335;
|
||||
}
|
||||
.test-row-icons > :is(svg, span).failed {
|
||||
color: #ba3329;
|
||||
}
|
||||
|
||||
/* 24px icon */
|
||||
.icon-24 :is(svg, span) {
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
vertical-align: -0.25em;
|
||||
}
|
||||
|
||||
/* Alert demo */
|
||||
.alert {
|
||||
position: relative;
|
||||
margin: 8px;
|
||||
padding: 16px;
|
||||
padding-left: 48px;
|
||||
background: #ba3329;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.alert + div {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.alert :is(svg, span) {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
font-size: 24px;
|
||||
line-height: 1em;
|
||||
margin: -0.5em 0 0;
|
||||
}
|
||||
|
||||
/* Checkbox component */
|
||||
.checkbox-container {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
cursor: pointer;
|
||||
/* color: #1769aa; */
|
||||
color: #626262;
|
||||
text-decoration: none;
|
||||
}
|
||||
.checkbox:hover {
|
||||
color: #ba3329;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.checkbox :is(svg, span) {
|
||||
margin-right: 4px;
|
||||
color: #afafaf;
|
||||
font-size: 24px;
|
||||
line-height: 1em;
|
||||
vertical-align: -0.25em;
|
||||
}
|
||||
.checkbox--checked :is(svg, span) {
|
||||
color: #327335;
|
||||
}
|
||||
.checkbox:hover :is(svg, span) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.checkbox-container small {
|
||||
margin-left: 4px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Inline demo */
|
||||
.inline-demo :is(svg, span) {
|
||||
color: #06a;
|
||||
margin: 0 8px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: #fff;
|
||||
}
|
||||
.inline-demo div {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.inline-demo div:before,
|
||||
.inline-demo div:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0;
|
||||
border-top: 1px dashed #506874;
|
||||
opacity: 0.5;
|
||||
z-index: -1;
|
||||
}
|
||||
.inline-demo div:before {
|
||||
bottom: 5px;
|
||||
}
|
||||
.inline-demo div:after {
|
||||
bottom: 7px;
|
||||
border-top-color: #ba3329;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -12,13 +12,13 @@
|
||||
"devDependencies": {
|
||||
"@iconify-icons/mdi-light": "^1.2.5",
|
||||
"@iconify/svelte": "workspace:*",
|
||||
"@sveltejs/vite-plugin-svelte": "^2.0.4",
|
||||
"@tsconfig/svelte": "^4.0.1",
|
||||
"svelte": "^3.58.0",
|
||||
"svelte-check": "^3.1.4",
|
||||
"svelte-preprocess": "^5.0.3",
|
||||
"tslib": "^2.5.0",
|
||||
"typescript": "^5.0.3",
|
||||
"vite": "^4.2.1"
|
||||
"@sveltejs/vite-plugin-svelte": "^2.5.3",
|
||||
"@tsconfig/svelte": "^5.0.2",
|
||||
"svelte": "^4.2.8",
|
||||
"svelte-check": "^3.6.2",
|
||||
"svelte-preprocess": "^5.1.3",
|
||||
"tslib": "^2.6.2",
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^5.0.10"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,71 +1,95 @@
|
||||
<script lang="ts">
|
||||
import Counter from './lib/Counter.svelte'
|
||||
import Icon from '@iconify/svelte';
|
||||
import { addIcon as addOfflineIcon, addCollection as addOfflineCollection } from '@iconify/svelte/dist/OfflineIcon.svelte';
|
||||
import {
|
||||
addIcon as addOnlineIcon,
|
||||
addCollection as addOnlineCollection,
|
||||
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';
|
||||
import FullOfflineUsageDemo from './lib/UsageFullOffline.svelte';
|
||||
import FullUsageDemo from './lib/UsageFull.svelte';
|
||||
|
||||
// Disable cache
|
||||
disableCache('all');
|
||||
|
||||
// Add 'mdi-light:presentation-play' as 'demo' for offline module
|
||||
addOfflineIcon('demo', presentationPlay);
|
||||
|
||||
// Add 'mdi-light:play' as 'demo' for full module
|
||||
addOnlineIcon('demo', playIcon);
|
||||
|
||||
// Add custom icon as 'experiment'
|
||||
addOfflineIcon('experiment2', {
|
||||
width: 16,
|
||||
height: 16,
|
||||
body: '<g fill="none" stroke-linecap="round" stroke-width="1" stroke="currentColor"><circle cx="8" cy="8" r="7.5" stroke-dasharray="48" stroke-dashoffset="48"><animate id="circle" attributeName="stroke-dashoffset" values="48;0" dur="0.5s" fill="freeze" /></circle><path d="M8 5v3" stroke-width="2" stroke-dasharray="5" stroke-dashoffset="5"><animate attributeName="stroke-dashoffset" values="5;0" dur="0.3s" begin="circle.end+0.1s" fill="freeze" /></path></g><circle cx="8" cy="11" r="1" fill="currentColor" opacity="0"><animate attributeName="opacity" values="0;1" dur="0.2s" begin="circle.end+0.5s" fill="freeze" /></circle>',
|
||||
});
|
||||
addOnlineIcon('experiment2', {
|
||||
width: 16,
|
||||
height: 16,
|
||||
body: '<mask id="coffee-mask" x="0" y="0" width="16" height="16"><g fill="white"><path d="M5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M8.5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M12-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4" stroke="white" stroke-width="1" fill="none"><animateMotion path="M0 0v-8" calcMode="linear" dur="3s" repeatCount="indefinite" /></path></g><rect y="4" width="16" height="12" fill="black" /><path d="M2 5H13C14.1046 5 15 5.89543 15 7V8C15 9.10457 14.1046 10 13 10H12V14C12 15.1046 11.1046 16 10 16H4C2.89543 16 2 15.1046 2 14V5Z" fill="white" /><path d="M12 6H13C13.5523 6 14 6.44772 14 7V8C14 8.55228 13.5523 9 13 9H12V6Z" fill="black" /></mask><rect mask="url(#coffee-mask)" width="16" height="16" fill="currentColor" />',
|
||||
});
|
||||
|
||||
// Add few mdi-light: icons
|
||||
addOfflineCollection({
|
||||
prefix: 'offline-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,
|
||||
});
|
||||
addOnlineCollection({
|
||||
prefix: '',
|
||||
icons: {
|
||||
alert1: {
|
||||
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"/>',
|
||||
},
|
||||
link1: {
|
||||
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,
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<div class="logo">
|
||||
<Icon icon="logos:svelte-icon" style="display: block; margin: 0 auto;" />
|
||||
</div>
|
||||
<OfflineUsageDemo />
|
||||
<FullOfflineUsageDemo />
|
||||
<FullUsageDemo />
|
||||
|
||||
<h1><Icon icon="gg:hello" title="Hello" /> <Icon icon="logos:typescript" title="TypeScript" /> <Icon icon="emojione:heavy-heart-exclamation" title="!" /></h1>
|
||||
<section>
|
||||
<h1>Checkbox</h1>
|
||||
<div>
|
||||
<Checkbox
|
||||
checked={true}
|
||||
text="Checkbox example"
|
||||
hint="(click to toggle)"
|
||||
/>
|
||||
<Checkbox
|
||||
checked={false}
|
||||
text="Another checkbox example"
|
||||
hint="(click to toggle)"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Counter />
|
||||
|
||||
<p>
|
||||
Visit <a href="https://svelte.dev">svelte.dev <Icon icon="ci:external-link" inline={true} mode="style" /></a> to learn how to build <Icon icon="logos:svelte" inline={true} />
|
||||
apps.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Check out <a href="https://github.com/sveltejs/kit#readme">SvelteKit <Icon icon="ci:external-link" inline={true} mode="style" /></a> for
|
||||
the officially supported framework, also powered by Vite!
|
||||
</p>
|
||||
<InlineDemo />
|
||||
</main>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
main {
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 16rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #ff3e00;
|
||||
text-transform: uppercase;
|
||||
font-size: 4rem;
|
||||
font-weight: 100;
|
||||
line-height: 1;
|
||||
margin: 2rem auto;
|
||||
max-width: 14rem;
|
||||
}
|
||||
|
||||
:global(h1 svg) {
|
||||
vertical-align: -0.125em;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 14rem;
|
||||
margin: 1rem auto;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
h1 {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 KiB |
37
components-demo/svelte-demo-vite/src/lib/Checkbox.svelte
Normal file
37
components-demo/svelte-demo-vite/src/lib/Checkbox.svelte
Normal file
@ -0,0 +1,37 @@
|
||||
<script>
|
||||
import Icon, {addIcon } from '@iconify/svelte/dist/OfflineIcon.svelte';
|
||||
|
||||
addIcon('demo:checked', {
|
||||
body: "<path fill=\"currentColor\" d=\"M10.21 14.75a1 1 0 0 0 1.42 0l4.08-4.08a1 1 0 0 0-1.42-1.42l-3.37 3.38l-1.21-1.22a1 1 0 0 0-1.42 1.42ZM21 2H3a1 1 0 0 0-1 1v18a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1m-1 18H4V4h16Z\"/>",
|
||||
width: 24,
|
||||
height: 24
|
||||
})
|
||||
addIcon('demo:unchecked', {
|
||||
body: "<path fill=\"currentColor\" d=\"M21 2H3a1 1 0 0 0-1 1v18a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1m-1 18H4V4h16Z\"/>",
|
||||
width: 24,
|
||||
height: 24
|
||||
})
|
||||
|
||||
export let checked = false;
|
||||
export let text = '';
|
||||
export let hint = '';
|
||||
|
||||
let isChecked = checked;
|
||||
|
||||
let icon = '';
|
||||
let className = '';
|
||||
$: {
|
||||
icon = isChecked ? 'demo:checked' : 'demo:unchecked';
|
||||
className =
|
||||
'checkbox checkbox--' + (isChecked ? 'checked' : 'unchecked');
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
isChecked = !isChecked;
|
||||
}
|
||||
</script>
|
||||
|
||||
<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>
|
||||
@ -1,39 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Icon from '@iconify/svelte';
|
||||
import plusIcon from '@iconify-icons/mdi-light/plus';
|
||||
|
||||
|
||||
let count: number = 0
|
||||
const increment = () => {
|
||||
count += 1
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<button on:click={increment}>
|
||||
<Icon icon={plusIcon} inline={true} /> Clicks: {count}
|
||||
</button>
|
||||
|
||||
<style>
|
||||
button {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
padding: 1em 2em;
|
||||
color: #ff3e00;
|
||||
background-color: rgba(255, 62, 0, 0.1);
|
||||
border-radius: 2em;
|
||||
border: 2px solid rgba(255, 62, 0, 0);
|
||||
outline: none;
|
||||
width: 200px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
border: 2px solid #ff3e00;
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: rgba(255, 62, 0, 0.2);
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
import App from './App.svelte'
|
||||
import App from './App.svelte';
|
||||
|
||||
const app = new App({
|
||||
target: document.getElementById('app')
|
||||
})
|
||||
target: document.getElementById('app')!,
|
||||
});
|
||||
|
||||
export default app
|
||||
export default app;
|
||||
|
||||
5
components-demo/svelte-demo/.gitignore
vendored
5
components-demo/svelte-demo/.gitignore
vendored
@ -1,5 +0,0 @@
|
||||
/node_modules/
|
||||
/public/build/
|
||||
/dist/
|
||||
|
||||
.DS_Store
|
||||
@ -1,93 +0,0 @@
|
||||
*Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*
|
||||
|
||||
---
|
||||
|
||||
# svelte app
|
||||
|
||||
This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
|
||||
|
||||
To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
|
||||
|
||||
```bash
|
||||
npx degit sveltejs/template svelte-app
|
||||
cd svelte-app
|
||||
```
|
||||
|
||||
*Note that you will need to have [Node.js](https://nodejs.org) installed.*
|
||||
|
||||
|
||||
## Get started
|
||||
|
||||
Install the dependencies...
|
||||
|
||||
```bash
|
||||
cd svelte-app
|
||||
npm install
|
||||
```
|
||||
|
||||
...then start [Rollup](https://rollupjs.org):
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
|
||||
|
||||
By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
|
||||
|
||||
|
||||
## Building and running in production mode
|
||||
|
||||
To create an optimised version of the app:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
|
||||
|
||||
|
||||
## Single-page app mode
|
||||
|
||||
By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
|
||||
|
||||
If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
|
||||
|
||||
```js
|
||||
"start": "sirv public --single"
|
||||
```
|
||||
|
||||
|
||||
## Deploying to the web
|
||||
|
||||
### With [now](https://zeit.co/now)
|
||||
|
||||
Install `now` if you haven't already:
|
||||
|
||||
```bash
|
||||
npm install -g now
|
||||
```
|
||||
|
||||
Then, from within your project folder:
|
||||
|
||||
```bash
|
||||
cd public
|
||||
now deploy --name my-project
|
||||
```
|
||||
|
||||
As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon.
|
||||
|
||||
### With [surge](https://surge.sh/)
|
||||
|
||||
Install `surge` if you haven't already:
|
||||
|
||||
```bash
|
||||
npm install -g surge
|
||||
```
|
||||
|
||||
Then, from within your project folder:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
surge public my-project.surge.sh
|
||||
```
|
||||
@ -1,24 +0,0 @@
|
||||
{
|
||||
"name": "@iconify-demo/svelte",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"module": "dist/index.mjs",
|
||||
"main": "dist/index.js",
|
||||
"scripts": {
|
||||
"build": "rollup -c",
|
||||
"dev": "rollup -c -w",
|
||||
"start": "sirv public --single --port 3000"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-icons/mdi-light": "^1.2.5",
|
||||
"@iconify-icons/uil": "^1.2.3",
|
||||
"@iconify/svelte": "workspace:*",
|
||||
"@rollup/plugin-node-resolve": "^9.0.0",
|
||||
"rollup": "^2.79.1",
|
||||
"rollup-plugin-svelte": "^7.1.4",
|
||||
"svelte": "^3.58.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"sirv-cli": "^2.0.2"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
@ -1,162 +0,0 @@
|
||||
main {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: left;
|
||||
color: #2c3e50;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
section {
|
||||
border-bottom: 1px dotted #ccc;
|
||||
padding: 16px;
|
||||
}
|
||||
section:last-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
section:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
h1,
|
||||
h2 {
|
||||
margin: 0 0 16px;
|
||||
padding: 0;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
h2 {
|
||||
margin: 16px 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
h1 + h2 {
|
||||
margin-top: -8px;
|
||||
}
|
||||
p {
|
||||
margin: 12px 0 4px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Tests */
|
||||
.test-row {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.test-row-icons {
|
||||
padding-right: 4px;
|
||||
}
|
||||
.test-row-icons > :is(svg, span) {
|
||||
color: #afafaf;
|
||||
display: none;
|
||||
}
|
||||
.test-row-icons > :is(svg, span).visible {
|
||||
display: inline-block;
|
||||
}
|
||||
.test-row-icons > :is(svg, span).success {
|
||||
color: #327335;
|
||||
}
|
||||
.test-row-icons > :is(svg, span).failed {
|
||||
color: #ba3329;
|
||||
}
|
||||
|
||||
/* 24px icon */
|
||||
.icon-24 :is(svg, span) {
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
vertical-align: -0.25em;
|
||||
}
|
||||
|
||||
/* Alert demo */
|
||||
.alert {
|
||||
position: relative;
|
||||
margin: 8px;
|
||||
padding: 16px;
|
||||
padding-left: 48px;
|
||||
background: #ba3329;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.alert + div {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.alert :is(svg, span) {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
font-size: 24px;
|
||||
line-height: 1em;
|
||||
margin: -0.5em 0 0;
|
||||
}
|
||||
|
||||
/* Checkbox component */
|
||||
.checkbox-container {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
cursor: pointer;
|
||||
/* color: #1769aa; */
|
||||
color: #626262;
|
||||
text-decoration: none;
|
||||
}
|
||||
.checkbox:hover {
|
||||
color: #ba3329;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.checkbox :is(svg, span) {
|
||||
margin-right: 4px;
|
||||
color: #afafaf;
|
||||
font-size: 24px;
|
||||
line-height: 1em;
|
||||
vertical-align: -0.25em;
|
||||
}
|
||||
.checkbox--checked :is(svg, span) {
|
||||
color: #327335;
|
||||
}
|
||||
.checkbox:hover :is(svg, span) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.checkbox-container small {
|
||||
margin-left: 4px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Inline demo */
|
||||
.inline-demo :is(svg, span) {
|
||||
color: #06a;
|
||||
margin: 0 8px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: #fff;
|
||||
}
|
||||
.inline-demo div {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.inline-demo div:before,
|
||||
.inline-demo div:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0;
|
||||
border-top: 1px dashed #506874;
|
||||
opacity: 0.5;
|
||||
z-index: -1;
|
||||
}
|
||||
.inline-demo div:before {
|
||||
bottom: 5px;
|
||||
}
|
||||
.inline-demo div:after {
|
||||
bottom: 7px;
|
||||
border-top-color: #ba3329;
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
||||
|
||||
<title>Svelte app</title>
|
||||
|
||||
<link rel='icon' type='image/png' href='/favicon.png'>
|
||||
<link rel='stylesheet' href='/global.css'>
|
||||
<link rel='stylesheet' href='/build/bundle.css'>
|
||||
|
||||
<script defer src='/build/bundle.js'></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,17 +0,0 @@
|
||||
import svelte from 'rollup-plugin-svelte';
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import pkg from './package.json';
|
||||
|
||||
const name = pkg.name
|
||||
.replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
|
||||
.replace(/^\w/, (m) => m.toUpperCase())
|
||||
.replace(/-\w/g, (m) => m[1].toUpperCase());
|
||||
|
||||
export default {
|
||||
input: 'src/main.js',
|
||||
output: [
|
||||
{ file: pkg.module, format: 'es' },
|
||||
{ file: pkg.main, format: 'umd', name },
|
||||
],
|
||||
plugins: [svelte(), resolve()],
|
||||
};
|
||||
@ -1,95 +0,0 @@
|
||||
<script>
|
||||
import { addIcon as addOfflineIcon, addCollection as addOfflineCollection } from '@iconify/svelte/dist/OfflineIcon.svelte';
|
||||
import {
|
||||
addIcon as addOnlineIcon,
|
||||
addCollection as addOnlineCollection,
|
||||
disableCache,
|
||||
} from '@iconify/svelte';
|
||||
|
||||
import presentationPlay from '@iconify-icons/mdi-light/presentation-play';
|
||||
import playIcon from '@iconify-icons/mdi-light/play';
|
||||
|
||||
import Checkbox from './demo-components/Checkbox.svelte';
|
||||
import InlineDemo from './demo-components/Inline.svelte';
|
||||
import OfflineUsageDemo from './demo-components/UsageOffline.svelte';
|
||||
import FullOfflineUsageDemo from './demo-components/UsageFullOffline.svelte';
|
||||
import FullUsageDemo from './demo-components/UsageFull.svelte';
|
||||
|
||||
// Disable cache
|
||||
disableCache('all');
|
||||
|
||||
// Add 'mdi-light:presentation-play' as 'demo' for offline module
|
||||
addOfflineIcon('demo', presentationPlay);
|
||||
|
||||
// Add 'mdi-light:play' as 'demo' for full module
|
||||
addOnlineIcon('demo', playIcon);
|
||||
|
||||
// Add custom icon as 'experiment'
|
||||
addOfflineIcon('experiment2', {
|
||||
width: 16,
|
||||
height: 16,
|
||||
body: '<g fill="none" stroke-linecap="round" stroke-width="1" stroke="currentColor"><circle cx="8" cy="8" r="7.5" stroke-dasharray="48" stroke-dashoffset="48"><animate id="circle" attributeName="stroke-dashoffset" values="48;0" dur="0.5s" fill="freeze" /></circle><path d="M8 5v3" stroke-width="2" stroke-dasharray="5" stroke-dashoffset="5"><animate attributeName="stroke-dashoffset" values="5;0" dur="0.3s" begin="circle.end+0.1s" fill="freeze" /></path></g><circle cx="8" cy="11" r="1" fill="currentColor" opacity="0"><animate attributeName="opacity" values="0;1" dur="0.2s" begin="circle.end+0.5s" fill="freeze" /></circle>',
|
||||
});
|
||||
addOnlineIcon('experiment2', {
|
||||
width: 16,
|
||||
height: 16,
|
||||
body: '<mask id="coffee-mask" x="0" y="0" width="16" height="16"><g fill="white"><path d="M5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M8.5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M12-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4" stroke="white" stroke-width="1" fill="none"><animateMotion path="M0 0v-8" calcMode="linear" dur="3s" repeatCount="indefinite" /></path></g><rect y="4" width="16" height="12" fill="black" /><path d="M2 5H13C14.1046 5 15 5.89543 15 7V8C15 9.10457 14.1046 10 13 10H12V14C12 15.1046 11.1046 16 10 16H4C2.89543 16 2 15.1046 2 14V5Z" fill="white" /><path d="M12 6H13C13.5523 6 14 6.44772 14 7V8C14 8.55228 13.5523 9 13 9H12V6Z" fill="black" /></mask><rect mask="url(#coffee-mask)" width="16" height="16" fill="currentColor" />',
|
||||
});
|
||||
|
||||
// Add few mdi-light: icons
|
||||
addOfflineCollection({
|
||||
prefix: 'offline-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,
|
||||
});
|
||||
addOnlineCollection({
|
||||
prefix: '',
|
||||
icons: {
|
||||
alert1: {
|
||||
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"/>',
|
||||
},
|
||||
link1: {
|
||||
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,
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<OfflineUsageDemo />
|
||||
<FullOfflineUsageDemo />
|
||||
<FullUsageDemo />
|
||||
|
||||
<section>
|
||||
<h1>Checkbox</h1>
|
||||
<div>
|
||||
<Checkbox
|
||||
checked={true}
|
||||
text="Checkbox example"
|
||||
hint="(click to toggle)"
|
||||
/>
|
||||
<Checkbox
|
||||
checked={false}
|
||||
text="Another checkbox example"
|
||||
hint="(click to toggle)"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<InlineDemo />
|
||||
</main>
|
||||
@ -1,28 +0,0 @@
|
||||
<script>
|
||||
import Icon from '@iconify/svelte/dist/OfflineIcon.svelte';
|
||||
import checkedIcon from '@iconify-icons/uil/check-square';
|
||||
import uncheckedIcon from '@iconify-icons/uil/square';
|
||||
|
||||
export let checked;
|
||||
export let text;
|
||||
export let hint;
|
||||
|
||||
let isChecked = checked;
|
||||
|
||||
let icon;
|
||||
let className;
|
||||
$: {
|
||||
icon = isChecked ? checkedIcon : uncheckedIcon;
|
||||
className =
|
||||
'checkbox checkbox--' + (isChecked ? 'checked' : 'unchecked');
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
isChecked = !isChecked;
|
||||
}
|
||||
</script>
|
||||
|
||||
<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>
|
||||
@ -1,7 +0,0 @@
|
||||
import App from './App.svelte';
|
||||
|
||||
const app = new App({
|
||||
target: document.body,
|
||||
});
|
||||
|
||||
export default app;
|
||||
@ -1,123 +0,0 @@
|
||||
<script>
|
||||
import Icon from '@iconify/svelte';
|
||||
|
||||
const paperclipIcon = 'dashicons:paperclip';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
section :global(svg) {
|
||||
color: #06a;
|
||||
font-size: 32px;
|
||||
line-height: 1em;
|
||||
margin-right: 8px;
|
||||
box-shadow: 0 0 0 1px #ccc;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section>
|
||||
<h1>Alignment (samples/Alignment.svelte)</h1>
|
||||
<div>
|
||||
<p>Icon with correct width/heigh ratio:</p>
|
||||
<Icon icon={paperclipIcon} />
|
||||
</div>
|
||||
<div>
|
||||
<p>Bad width/height ratio, default alignment (slice = false):</p>
|
||||
<Icon icon={paperclipIcon} width="2em" height="1em" />
|
||||
<Icon icon={paperclipIcon} width="1em" height="2em" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Slice:</p>
|
||||
<Icon icon={paperclipIcon} width="2em" height="1em" slice={true} />
|
||||
<Icon icon={paperclipIcon} width="2em" height="1em" align="slice" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Slice:</p>
|
||||
<Icon icon={paperclipIcon} width="1em" height="2em" slice={true} />
|
||||
<Icon icon={paperclipIcon} width="1em" height="2em" align="slice" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Left:</p>
|
||||
<Icon icon={paperclipIcon} width="2em" height="1em" hAlign="left" />
|
||||
<Icon icon={paperclipIcon} width="2em" height="1em" align="left" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Left with slice:</p>
|
||||
<Icon
|
||||
icon={paperclipIcon}
|
||||
width="1em"
|
||||
height="2em"
|
||||
hAlign="left"
|
||||
slice={true} />
|
||||
<Icon
|
||||
icon={paperclipIcon}
|
||||
width="1em"
|
||||
height="2em"
|
||||
align="left"
|
||||
slice={true} />
|
||||
<Icon icon={paperclipIcon} width="1em" height="2em" align="left,slice" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Right:</p>
|
||||
<Icon icon={paperclipIcon} width="2em" height="1em" hAlign="right" />
|
||||
<Icon icon={paperclipIcon} width="2em" height="1em" align="right" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Right with slice:</p>
|
||||
<Icon
|
||||
icon={paperclipIcon}
|
||||
width="1em"
|
||||
height="2em"
|
||||
hAlign="right"
|
||||
slice={true} />
|
||||
<Icon
|
||||
icon={paperclipIcon}
|
||||
width="1em"
|
||||
height="2em"
|
||||
align="right"
|
||||
slice={true} />
|
||||
<Icon icon={paperclipIcon} width="1em" height="2em" align="right,slice" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Top:</p>
|
||||
<Icon icon={paperclipIcon} width="1em" height="2em" vAlign="top" />
|
||||
<Icon icon={paperclipIcon} width="1em" height="2em" align="top" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Top with slice:</p>
|
||||
<Icon
|
||||
icon={paperclipIcon}
|
||||
width="2em"
|
||||
height="1em"
|
||||
vAlign="top"
|
||||
slice={true} />
|
||||
<Icon
|
||||
icon={paperclipIcon}
|
||||
width="2em"
|
||||
height="1em"
|
||||
align="top"
|
||||
slice={true} />
|
||||
<Icon icon={paperclipIcon} width="2em" height="1em" align="top,slice" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Bottom:</p>
|
||||
<Icon icon={paperclipIcon} width="1em" height="2em" vAlign="bottom" />
|
||||
<Icon icon={paperclipIcon} width="1em" height="2em" align="bottom" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Bottom with slice:</p>
|
||||
<Icon
|
||||
icon={paperclipIcon}
|
||||
width="2em"
|
||||
height="1em"
|
||||
vAlign="bottom"
|
||||
slice={true} />
|
||||
<Icon
|
||||
icon={paperclipIcon}
|
||||
width="2em"
|
||||
height="1em"
|
||||
align="bottom"
|
||||
slice={true} />
|
||||
<Icon icon={paperclipIcon} width="2em" height="1em" align="bottom,slice" />
|
||||
</div>
|
||||
</section>
|
||||
@ -1,64 +0,0 @@
|
||||
<script>
|
||||
import Icon from '@iconify/svelte';
|
||||
|
||||
const demoIcon = {
|
||||
width: 16,
|
||||
height: 16,
|
||||
body:
|
||||
'<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"/>',
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
section :global(svg) {
|
||||
color: #06a;
|
||||
margin-right: 8px;
|
||||
/* box-shadow: 0 0 0 1px #06a inset; */
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: #fff;
|
||||
}
|
||||
div {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
div:before,
|
||||
div:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0;
|
||||
border-top: 1px dashed #506874;
|
||||
opacity: 0.5;
|
||||
z-index: -1;
|
||||
}
|
||||
div:before {
|
||||
bottom: 5px;
|
||||
}
|
||||
div:after {
|
||||
bottom: 7px;
|
||||
border-top-color: #ba3329;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section>
|
||||
<h1>Inline (samples/Inline.svelte)</h1>
|
||||
<div>
|
||||
Block icon (behaving like image):
|
||||
<Icon icon={demoIcon} />
|
||||
</div>
|
||||
<div>
|
||||
Inline icon (behaving line text / icon font):
|
||||
<Icon icon={demoIcon} inline={true} />
|
||||
</div>
|
||||
<div>
|
||||
Using "vertical-align: 0" to override inline attribute:
|
||||
<Icon icon={demoIcon} style="vertical-align: 0" />
|
||||
<Icon icon={demoIcon} style="vertical-align: 0;" inline={true} />
|
||||
</div>
|
||||
</section>
|
||||
@ -13,16 +13,16 @@
|
||||
"@iconify/svelte": "workspace:*",
|
||||
"@sveltejs/adapter-auto": "next",
|
||||
"@sveltejs/kit": "next",
|
||||
"@types/cookie": "^0.5.1",
|
||||
"svelte": "^3.58.0",
|
||||
"svelte-check": "^3.1.4",
|
||||
"svelte-preprocess": "^5.0.3",
|
||||
"tslib": "^2.5.0",
|
||||
"typescript": "^5.0.3",
|
||||
"vite": "^4.2.1"
|
||||
"@types/cookie": "^0.6.0",
|
||||
"svelte": "^4.2.8",
|
||||
"svelte-check": "^3.6.2",
|
||||
"svelte-preprocess": "^5.1.3",
|
||||
"tslib": "^2.6.2",
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^5.0.10"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@fontsource/fira-mono": "^4.5.10"
|
||||
"@fontsource/fira-mono": "^5.0.8"
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,10 @@
|
||||
"name": "@iconify/svelte",
|
||||
"description": "Iconify icon component for Svelte.",
|
||||
"author": "Vjacheslav Trushkin",
|
||||
"version": "3.1.6",
|
||||
"version": "4.0.0-beta.2",
|
||||
"publishConfig": {
|
||||
"tag": "next"
|
||||
},
|
||||
"license": "MIT",
|
||||
"bugs": "https://github.com/iconify/iconify/issues",
|
||||
"homepage": "https://github.com/iconify/iconify",
|
||||
@ -13,14 +16,17 @@
|
||||
"directory": "components/svelte"
|
||||
},
|
||||
"svelte": "dist/Icon.svelte",
|
||||
"module": "dist/index.mjs",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"svelte": "./dist/Icon.svelte",
|
||||
"types": "./dist/index.d.ts"
|
||||
}
|
||||
},
|
||||
"./dist/OfflineIcon.svelte": {
|
||||
"svelte": "./dist/OfflineIcon.svelte",
|
||||
"types": "./dist/offline.d.ts"
|
||||
},
|
||||
"./*": "./*"
|
||||
},
|
||||
"scripts": {
|
||||
"cleanup": "rimraf lib dist",
|
||||
@ -37,23 +43,23 @@
|
||||
"devDependencies": {
|
||||
"@iconify/core": "workspace:^",
|
||||
"@iconify/utils": "workspace:^",
|
||||
"@microsoft/api-extractor": "^7.35.1",
|
||||
"@rollup/plugin-node-resolve": "^15.1.0",
|
||||
"@rollup/plugin-typescript": "^11.1.1",
|
||||
"@sveltejs/vite-plugin-svelte": "^2.4.1",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/svelte": "^3.2.2",
|
||||
"@tsconfig/svelte": "^4.0.1",
|
||||
"@types/jest": "^29.5.2",
|
||||
"@types/node": "^18.16.16",
|
||||
"rimraf": "^4.4.1",
|
||||
"rollup": "^3.23.1",
|
||||
"rollup-plugin-svelte": "^7.1.5",
|
||||
"svelte": "3.58.0",
|
||||
"svelte-preprocess": "^5.0.4",
|
||||
"vitest": "^0.29.8"
|
||||
"@microsoft/api-extractor": "^7.39.0",
|
||||
"@rollup/plugin-node-resolve": "^15.2.3",
|
||||
"@rollup/plugin-typescript": "^11.1.5",
|
||||
"@sveltejs/vite-plugin-svelte": "^2.5.3",
|
||||
"@testing-library/jest-dom": "^6.1.5",
|
||||
"@testing-library/svelte": "^4.0.5",
|
||||
"@tsconfig/svelte": "^5.0.2",
|
||||
"@types/jest": "^29.5.11",
|
||||
"@types/node": "^20.10.5",
|
||||
"rimraf": "^5.0.5",
|
||||
"rollup": "^4.9.1",
|
||||
"rollup-plugin-svelte": "^7.1.6",
|
||||
"svelte": "4.2.8",
|
||||
"svelte-preprocess": "^5.1.3",
|
||||
"vitest": "^1.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"svelte": "*"
|
||||
"svelte": ">4.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
8
components/svelte/src/svelte.d.ts
vendored
8
components/svelte/src/svelte.d.ts
vendored
@ -1,9 +1,9 @@
|
||||
import { SvelteComponentTyped } from 'svelte';
|
||||
import { HTMLAttributes } from 'svelte/elements';
|
||||
import { SvelteComponent } from 'svelte';
|
||||
import type { SvelteHTMLElements } from 'svelte/elements';
|
||||
|
||||
/**
|
||||
* Svelte component
|
||||
*/
|
||||
export default class Icon extends SvelteComponentTyped<
|
||||
IconProps & HTMLAttributes<SVGSVGElement> & Record<`data-${string}`, string>
|
||||
export default class Icon extends SvelteComponent<
|
||||
IconProps & SvelteHTMLElements['svg'] & Record<`data-${string}`, string>
|
||||
> {}
|
||||
|
||||
@ -11,14 +11,14 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-icons/mdi-light": "^1.2.5",
|
||||
"@sveltejs/vite-plugin-svelte": "^2.4.3",
|
||||
"@tsconfig/svelte": "^5.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^2.5.3",
|
||||
"@tsconfig/svelte": "^5.0.2",
|
||||
"iconify-icon": "workspace:*",
|
||||
"svelte": "^4.1.2",
|
||||
"svelte-check": "^3.4.6",
|
||||
"svelte-preprocess": "^5.0.4",
|
||||
"tslib": "^2.6.1",
|
||||
"typescript": "^5.1.6",
|
||||
"vite": "^4.4.8"
|
||||
"svelte": "^4.2.8",
|
||||
"svelte-check": "^3.6.2",
|
||||
"svelte-preprocess": "^5.1.3",
|
||||
"tslib": "^2.6.2",
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^5.0.10"
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,17 +12,17 @@
|
||||
"@iconify-icons/mdi-light": "^1.2.5",
|
||||
"@sveltejs/adapter-auto": "next",
|
||||
"@sveltejs/kit": "next",
|
||||
"@types/cookie": "^0.5.1",
|
||||
"@types/cookie": "^0.6.0",
|
||||
"iconify-icon": "workspace:*",
|
||||
"svelte": "^4.1.2",
|
||||
"svelte-check": "^3.4.6",
|
||||
"svelte-preprocess": "^5.0.4",
|
||||
"tslib": "^2.6.1",
|
||||
"typescript": "^5.1.6",
|
||||
"vite": "^4.4.8"
|
||||
"svelte": "^4.2.8",
|
||||
"svelte-check": "^3.6.2",
|
||||
"svelte-preprocess": "^5.1.3",
|
||||
"tslib": "^2.6.2",
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^5.0.10"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@fontsource/fira-mono": "^5.0.5"
|
||||
"@fontsource/fira-mono": "^5.0.8"
|
||||
}
|
||||
}
|
||||
|
||||
6757
pnpm-lock.yaml
6757
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user