mirror of
https://github.com/iconify/iconify.git
synced 2024-12-22 09:48:54 +00:00
Lit demo for web component, minor tweaks to other demo packages
This commit is contained in:
Vjacheslav Trushkin
parent
660ef6e8a3
commit
11a298690b
@ -70,9 +70,10 @@ Directory `iconify-icon` contains `iconify-icon` web component and wrappers for
|
||||
Frameworks that are confirmed to work with web components without custom wrappers:
|
||||
|
||||
- Svelte.
|
||||
- Lit.
|
||||
- Ember.
|
||||
- Vue 2 and Vue 3, but requires custom config when used in Nuxt (see below).
|
||||
- React, but with small differences, such as using `class` instead of `className`. Wrapper fixes it and provides types.
|
||||
- Ember.
|
||||
|
||||
#### Demo
|
||||
|
||||
@ -87,6 +88,7 @@ Directory `iconify-icon-demo` contains demo packages that show usage of `iconify
|
||||
- [Nuxt 3 demo](./iconify-icon-demo/nuxt3-demo/) - demo for web component with Nuxt 3. Run `npm run dev` to start demo. Requires custom config, see below.
|
||||
- [Vue 2 demo](./iconify-icon-demo/vue2-demo/) - demo for web component with Vue 2. Run `npm run build` to build demo and `npm run serve` to start it.
|
||||
- [SolidJS demo](./iconify-icon-demo/solid-demo/) - demo using web component with SolidJS. Run `npm run dev` to start demo.
|
||||
- [Lit demo](./iconify-icon-demo/lit-demo/) - demo for web component with Lit. Run `npm run start` to start demo.
|
||||
|
||||
#### Nuxt 3 usage
|
||||
|
||||
|
||||
29
iconify-icon-demo/lit-demo/.editorconfig
Normal file
29
iconify-icon-demo/lit-demo/.editorconfig
Normal file
@ -0,0 +1,29 @@
|
||||
# EditorConfig helps developers define and maintain consistent
|
||||
# coding styles between different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
|
||||
[*]
|
||||
|
||||
# Change these settings to your own preference
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
# We recommend you to keep these unchanged
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[*.json]
|
||||
indent_size = 2
|
||||
|
||||
[*.{html,js,md}]
|
||||
block_comment_start = /**
|
||||
block_comment = *
|
||||
block_comment_end = */
|
||||
24
iconify-icon-demo/lit-demo/.gitignore
vendored
Normal file
24
iconify-icon-demo/lit-demo/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
## editors
|
||||
/.idea
|
||||
/.vscode
|
||||
|
||||
## system files
|
||||
.DS_Store
|
||||
|
||||
## npm
|
||||
/node_modules/
|
||||
/npm-debug.log
|
||||
|
||||
## testing
|
||||
/coverage/
|
||||
|
||||
## temp folders
|
||||
/.tmp/
|
||||
|
||||
# build
|
||||
/_site/
|
||||
/dist/
|
||||
/out-tsc/
|
||||
|
||||
storybook-static
|
||||
custom-elements.json
|
||||
21
iconify-icon-demo/lit-demo/LICENSE
Normal file
21
iconify-icon-demo/lit-demo/LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2022 lit-demo
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
30
iconify-icon-demo/lit-demo/README.md
Normal file
30
iconify-icon-demo/lit-demo/README.md
Normal file
@ -0,0 +1,30 @@
|
||||
<p align="center">
|
||||
<img width="200" src="https://open-wc.org/hero.png"></img>
|
||||
</p>
|
||||
|
||||
## Open-wc Starter App
|
||||
|
||||
[](https://github.com/open-wc)
|
||||
|
||||
## Quickstart
|
||||
|
||||
To get started:
|
||||
|
||||
```sh
|
||||
npm init @open-wc
|
||||
# requires node 10 & npm 6 or higher
|
||||
```
|
||||
|
||||
## Scripts
|
||||
|
||||
- `start` runs your app for development, reloading on file changes
|
||||
- `start:build` runs your app after it has been built using the build command
|
||||
- `build` builds your app and outputs it in your `dist` directory
|
||||
- `test` runs your test suite with Web Test Runner
|
||||
- `lint` runs the linter for your project
|
||||
|
||||
## Tooling configs
|
||||
|
||||
For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
|
||||
|
||||
If you customize the configuration a lot, you can consider moving them to individual files.
|
||||
29
iconify-icon-demo/lit-demo/assets/open-wc-logo.svg
Normal file
29
iconify-icon-demo/lit-demo/assets/open-wc-logo.svg
Normal file
@ -0,0 +1,29 @@
|
||||
<svg
|
||||
width="244px"
|
||||
height="244px"
|
||||
viewBox="0 0 244 244"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#9B00FF" offset="0%"></stop>
|
||||
<stop stop-color="#0077FF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g
|
||||
id="Page-1"
|
||||
stroke="none"
|
||||
stroke-width="1"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
>
|
||||
<path
|
||||
d="M205.639259,176.936244 C207.430887,174.217233 209.093339,171.405629 210.617884,168.510161 M215.112174,158.724316 C216.385153,155.50304 217.495621,152.199852 218.433474,148.824851 M220.655293,138.874185 C221.231935,135.482212 221.637704,132.03207 221.863435,128.532919 M222,118.131039 C221.860539,114.466419 221.523806,110.85231 221.000113,107.299021 M218.885321,96.8583653 C218.001583,93.4468963 216.942225,90.1061026 215.717466,86.8461994 M211.549484,77.3039459 C209.957339,74.1238901 208.200597,71.0404957 206.290425,68.0649233 M200.180513,59.5598295 C181.848457,36.6639805 153.655709,22 122.036748,22 C66.7879774,22 22,66.771525 22,122 C22,177.228475 66.7879774,222 122.036748,222 C152.914668,222 180.52509,208.015313 198.875424,186.036326"
|
||||
id="Shape"
|
||||
stroke="url(#linearGradient-1)"
|
||||
stroke-width="42.0804674"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
28
iconify-icon-demo/lit-demo/index.html
Normal file
28
iconify-icon-demo/lit-demo/index.html
Normal file
@ -0,0 +1,28 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||
<meta name="Description" content="Put your description here.">
|
||||
<base href="/">
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
background-color: #ededed;
|
||||
}
|
||||
</style>
|
||||
<title>lit-demo</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<lit-demo></lit-demo>
|
||||
|
||||
<script type="module" src="./out-tsc/src/lit-demo.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
11702
iconify-icon-demo/lit-demo/package-lock.json
generated
Normal file
11702
iconify-icon-demo/lit-demo/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
38
iconify-icon-demo/lit-demo/package.json
Normal file
38
iconify-icon-demo/lit-demo/package.json
Normal file
@ -0,0 +1,38 @@
|
||||
{
|
||||
"name": "@iconify-icon/lit-demo",
|
||||
"private": true,
|
||||
"description": "Webcomponent lit-demo following open-wc recommendations",
|
||||
"license": "MIT",
|
||||
"author": "lit-demo",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"build": "rimraf dist && tsc && rollup -c rollup.config.js",
|
||||
"start:build": "web-dev-server --root-dir dist --app-index index.html --open",
|
||||
"analyze": "cem analyze --litelement",
|
||||
"start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\""
|
||||
},
|
||||
"dependencies": {
|
||||
"lit": "^2.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/preset-env": "^7.16.4",
|
||||
"@custom-elements-manifest/analyzer": "^0.4.17",
|
||||
"@iconify-icons/line-md": "^1.2.4",
|
||||
"@open-wc/building-rollup": "^2.0.1",
|
||||
"@rollup/plugin-babel": "^5.3.0",
|
||||
"@rollup/plugin-node-resolve": "^13.0.6",
|
||||
"@web/dev-server": "^0.1.28",
|
||||
"@web/rollup-plugin-html": "^1.10.1",
|
||||
"@web/rollup-plugin-import-meta-assets": "^1.0.7",
|
||||
"babel-plugin-template-html-minifier": "^4.1.0",
|
||||
"concurrently": "^5.3.0",
|
||||
"deepmerge": "^4.2.2",
|
||||
"rimraf": "^3.0.2",
|
||||
"rollup": "^2.60.0",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"rollup-plugin-workbox": "^6.2.0",
|
||||
"tslib": "^2.3.1",
|
||||
"typescript": "^4.5.2"
|
||||
},
|
||||
"customElements": "custom-elements.json"
|
||||
}
|
||||
84
iconify-icon-demo/lit-demo/rollup.config.js
Normal file
84
iconify-icon-demo/lit-demo/rollup.config.js
Normal file
@ -0,0 +1,84 @@
|
||||
import nodeResolve from '@rollup/plugin-node-resolve';
|
||||
import babel from '@rollup/plugin-babel';
|
||||
import html from '@web/rollup-plugin-html';
|
||||
import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets';
|
||||
import { terser } from 'rollup-plugin-terser';
|
||||
import { generateSW } from 'rollup-plugin-workbox';
|
||||
import path from 'path';
|
||||
|
||||
export default {
|
||||
input: 'index.html',
|
||||
output: {
|
||||
entryFileNames: '[hash].js',
|
||||
chunkFileNames: '[hash].js',
|
||||
assetFileNames: '[hash][extname]',
|
||||
format: 'es',
|
||||
dir: 'dist',
|
||||
},
|
||||
preserveEntrySignatures: false,
|
||||
|
||||
plugins: [
|
||||
/** Enable using HTML as rollup entrypoint */
|
||||
html({
|
||||
minify: true,
|
||||
injectServiceWorker: true,
|
||||
serviceWorkerPath: 'dist/sw.js',
|
||||
}),
|
||||
/** Resolve bare module imports */
|
||||
nodeResolve(),
|
||||
/** Minify JS */
|
||||
terser(),
|
||||
/** Bundle assets references via import.meta.url */
|
||||
importMetaAssets(),
|
||||
/** Compile JS to a lower language target */
|
||||
babel({
|
||||
babelHelpers: 'bundled',
|
||||
presets: [
|
||||
[
|
||||
require.resolve('@babel/preset-env'),
|
||||
{
|
||||
targets: [
|
||||
'last 3 Chrome major versions',
|
||||
'last 3 Firefox major versions',
|
||||
'last 3 Edge major versions',
|
||||
'last 3 Safari major versions',
|
||||
],
|
||||
modules: false,
|
||||
bugfixes: true,
|
||||
},
|
||||
],
|
||||
],
|
||||
plugins: [
|
||||
[
|
||||
require.resolve('babel-plugin-template-html-minifier'),
|
||||
{
|
||||
modules: { lit: ['html', { name: 'css', encapsulation: 'style' }] },
|
||||
failOnError: false,
|
||||
strictCSS: true,
|
||||
htmlMinifier: {
|
||||
collapseWhitespace: true,
|
||||
conservativeCollapse: true,
|
||||
removeComments: true,
|
||||
caseSensitive: true,
|
||||
minifyCSS: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
}),
|
||||
/** Create and inject a service worker */
|
||||
generateSW({
|
||||
globIgnores: ['polyfills/*.js', 'nomodule-*.js'],
|
||||
navigateFallback: '/index.html',
|
||||
// where to output the generated sw
|
||||
swDest: path.join('dist', 'sw.js'),
|
||||
// directory to match patterns against to be precached
|
||||
globDirectory: path.join('dist'),
|
||||
// cache any html js and css by default
|
||||
globPatterns: ['**/*.{html,js,css,webmanifest}'],
|
||||
skipWaiting: true,
|
||||
clientsClaim: true,
|
||||
runtimeCaching: [{ urlPattern: 'polyfills/*.js', handler: 'CacheFirst' }],
|
||||
}),
|
||||
],
|
||||
};
|
||||
272
iconify-icon-demo/lit-demo/src/LitDemo.ts
Normal file
272
iconify-icon-demo/lit-demo/src/LitDemo.ts
Normal file
@ -0,0 +1,272 @@
|
||||
import { LitElement, html, css } from 'lit';
|
||||
import { property } from 'lit/decorators.js';
|
||||
|
||||
import { addIcon, addCollection, disableCache } from 'iconify-icon';
|
||||
import calendarIcon from '@iconify-icons/line-md/calendar';
|
||||
|
||||
import accountIcon from '@iconify-icons/line-md/account';
|
||||
import alertIcon from '@iconify-icons/line-md/alert';
|
||||
|
||||
// Disable cache
|
||||
disableCache('all');
|
||||
|
||||
// Add few custom icons
|
||||
addIcon('demo', calendarIcon);
|
||||
addIcon('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>',
|
||||
});
|
||||
|
||||
// Add mdi-light icons with custom prefix
|
||||
addCollection({
|
||||
prefix: 'test',
|
||||
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,
|
||||
});
|
||||
|
||||
export class LitDemo extends LitElement {
|
||||
@property({ type: String }) title = 'IconifyIcon Demo';
|
||||
|
||||
static styles = css`
|
||||
:host {
|
||||
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 > iconify-icon {
|
||||
color: #afafaf;
|
||||
display: none;
|
||||
}
|
||||
.test-row-icons > iconify-icon.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
.test-row-icons > iconify-icon.visible {
|
||||
display: inline-block;
|
||||
}
|
||||
.test-row-icons > iconify-icon.success {
|
||||
color: #327335;
|
||||
}
|
||||
.test-row-icons > iconify-icon.failed {
|
||||
color: #ba3329;
|
||||
}
|
||||
|
||||
/* 24px icon */
|
||||
.icon-24 iconify-icon {
|
||||
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 iconify-icon {
|
||||
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 iconify-icon {
|
||||
margin-right: 4px;
|
||||
color: #afafaf;
|
||||
font-size: 24px;
|
||||
line-height: 1em;
|
||||
vertical-align: -0.25em;
|
||||
}
|
||||
.checkbox--checked iconify-icon {
|
||||
color: #327335;
|
||||
}
|
||||
.checkbox:hover iconify-icon {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.checkbox-container small {
|
||||
margin-left: 4px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Inline demo */
|
||||
.inline-demo iconify-icon {
|
||||
color: #06a;
|
||||
margin: 0 8px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
box-shadow: 0 0 0 2px rgba(255, 128, 0, 0.5) inset;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.inline-demo div:before {
|
||||
bottom: 5px;
|
||||
}
|
||||
.inline-demo div:after {
|
||||
bottom: 7px;
|
||||
border-top-color: #ba3329;
|
||||
}
|
||||
`;
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<section class="icon-24">
|
||||
<h1>Usage (full module)</h1>
|
||||
<div>
|
||||
Icons referenced by name (as SVG, as SPAN):
|
||||
<iconify-icon icon="mdi:home"></iconify-icon>
|
||||
<iconify-icon icon="mdi:home" mode="style"></iconify-icon>
|
||||
</div>
|
||||
<div class="alert">
|
||||
<iconify-icon icon="mdi-light:alert"></iconify-icon>
|
||||
Important notice with alert icon!
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="icon-24">
|
||||
<h1>Usage (offline mode: using preloaded icons)</h1>
|
||||
<div>
|
||||
Icons referenced by name (as SVG, as SPAN):
|
||||
<iconify-icon icon="demo"></iconify-icon>
|
||||
<iconify-icon icon="demo" mode="style"></iconify-icon>
|
||||
</div>
|
||||
<div>
|
||||
Icons referenced by stringified object (as SVG, as SPAN):
|
||||
<iconify-icon icon="${JSON.stringify(accountIcon)}"></iconify-icon>
|
||||
<iconify-icon
|
||||
icon="${JSON.stringify(accountIcon)}"
|
||||
mode="style"
|
||||
></iconify-icon>
|
||||
</div>
|
||||
<div>
|
||||
2 icons imported from icon set:
|
||||
<iconify-icon icon="test:alert1"></iconify-icon>
|
||||
<iconify-icon icon="test:link1" mode="style"></iconify-icon>
|
||||
</div>
|
||||
<div class="alert">
|
||||
<iconify-icon
|
||||
icon="${JSON.stringify(alertIcon)}"
|
||||
mode="mask"
|
||||
></iconify-icon>
|
||||
Important notice with alert icon!
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="inline-demo">
|
||||
<h1>Inline demo</h1>
|
||||
<div>
|
||||
Block icon (behaving like image):
|
||||
<iconify-icon icon="experiment2"></iconify-icon>
|
||||
<iconify-icon
|
||||
icon="experiment2"
|
||||
inline
|
||||
style="vertical-align: 0;"
|
||||
></iconify-icon>
|
||||
</div>
|
||||
<div>
|
||||
Inline icon (behaving line text / icon font):
|
||||
<iconify-icon icon="experiment2" inline></iconify-icon>
|
||||
<iconify-icon
|
||||
icon="experiment2"
|
||||
style="vertical-align: -0.125em;"
|
||||
></iconify-icon>
|
||||
</div>
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
}
|
||||
4
iconify-icon-demo/lit-demo/src/lit-demo.ts
Normal file
4
iconify-icon-demo/lit-demo/src/lit-demo.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import 'iconify-icon';
|
||||
import { LitDemo } from './LitDemo.js';
|
||||
|
||||
customElements.define('lit-demo', LitDemo);
|
||||
20
iconify-icon-demo/lit-demo/tsconfig.json
Normal file
20
iconify-icon-demo/lit-demo/tsconfig.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2018",
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"noEmitOnError": true,
|
||||
"lib": ["es2017", "dom"],
|
||||
"strict": true,
|
||||
"esModuleInterop": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"experimentalDecorators": true,
|
||||
"importHelpers": true,
|
||||
"outDir": "out-tsc",
|
||||
"sourceMap": true,
|
||||
"inlineSources": true,
|
||||
"rootDir": "./",
|
||||
"incremental": true
|
||||
},
|
||||
"include": ["**/*.ts"]
|
||||
}
|
||||
26
iconify-icon-demo/lit-demo/web-dev-server.config.mjs
Normal file
26
iconify-icon-demo/lit-demo/web-dev-server.config.mjs
Normal file
@ -0,0 +1,26 @@
|
||||
// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
|
||||
|
||||
/** Use Hot Module replacement by adding --hmr to the start command */
|
||||
const hmr = process.argv.includes('--hmr');
|
||||
|
||||
export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
|
||||
open: '/',
|
||||
watch: !hmr,
|
||||
/** Resolve bare module imports */
|
||||
nodeResolve: {
|
||||
exportConditions: ['browser', 'development'],
|
||||
},
|
||||
|
||||
/** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
|
||||
// esbuildTarget: 'auto'
|
||||
|
||||
/** Set appIndex to enable SPA routing */
|
||||
// appIndex: 'demo/index.html',
|
||||
|
||||
plugins: [
|
||||
/** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
|
||||
// hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
|
||||
],
|
||||
|
||||
// See documentation for all available options
|
||||
});
|
||||
@ -18,7 +18,7 @@ addIcon('demo', chartIcon);
|
||||
addIcon('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" />',
|
||||
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>',
|
||||
});
|
||||
|
||||
// Add mdi-light icons with custom prefix
|
||||
|
||||
1
iconify-icon-demo/solid-demo/.gitignore
vendored
1
iconify-icon-demo/solid-demo/.gitignore
vendored
@ -1,2 +1,3 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
dist
|
||||
@ -2,6 +2,7 @@
|
||||
"name": "@iconify-icon/solid-demo",
|
||||
"version": "0.0.0",
|
||||
"description": "",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
|
||||
@ -19,7 +19,7 @@ addIcon('demo', calendarIcon);
|
||||
addIcon('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" />',
|
||||
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>',
|
||||
});
|
||||
|
||||
// Add mdi-light icons with custom prefix
|
||||
|
||||
Loading…
Reference in New Issue
Block a user