mirror of
https://github.com/iconify/iconify.git
synced 2025-01-05 15:02:09 +00:00
Vue 3 component, archive Vue 2 component, update dependencies in few packages
This commit is contained in:
Vjacheslav Trushkin
parent
94c62dd0dc
commit
bc86c9e9af
2
.gitignore
vendored
2
.gitignore
vendored
@ -1,2 +1,4 @@
|
||||
.DS_Store
|
||||
.vscode
|
||||
node_modules
|
||||
lerna-debug.log
|
||||
11
README.md
11
README.md
@ -67,11 +67,20 @@ Other packages:
|
||||
- [Iconify core](./packages/core/) - common files used by various implementations.
|
||||
- [React demo](./packages/react-demo/) - demo for React component. Run `npm start` to start demo.
|
||||
- [React with API demo](./packages/react-demo-with-api/) - demo for React component that loads icons from Iconify API. Run `npm start` to start demo.
|
||||
- [Vue demo](./packages/vue-demo/) - demo for Vue component. Run `npm serve` to start demo.
|
||||
- [Vue demo](./packages/vue-demo/) - demo for Vue component. Run `npm run dev` to start demo.
|
||||
- [Svelte demo](./packages/svelte-demo/) - demo for Svelte component. Run `npm run dev` to start demo.
|
||||
- [Sapper demo](./packages/sapper-demo/) - demo for Sapper, using Svelte component on the server and in the browser. Run `npm run dev` to start the demo.
|
||||
- [Browser tests](./packages/browser-tests/) - unit tests for SVG framework. Run `npm run build` to build it. Open test.html in browser (requires HTTP server).
|
||||
|
||||
### Legacy packages
|
||||
|
||||
Unfortunately Lerna does not support several versions of the same package. Because of that, some packages were moved from "packages" to "archive". This applies only to packages that were replaced by newer packages that aren't backwards compatible (and packages that rely on those packages).
|
||||
|
||||
Legacy packages:
|
||||
|
||||
- [Vue 2 component](./archive/vue2/) - Vue 2 component. It has been replaced by [Vue 3 component](./packages/vue/).
|
||||
- [Vue 2 demo](./archive/vue2-demo/) - demo for Vue 2 component. Run `npm serve` to start demo.
|
||||
|
||||
## Installation
|
||||
|
||||
This monorepo uses Lerna to manage packages.
|
||||
|
||||
21
archive/vue2-demo/.gitignore
vendored
Normal file
21
archive/vue2-demo/.gitignore
vendored
Normal file
@ -0,0 +1,21 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
24
archive/vue2-demo/README.md
Normal file
24
archive/vue2-demo/README.md
Normal file
@ -0,0 +1,24 @@
|
||||
# vue-demo
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
12716
archive/vue2-demo/package-lock.json
generated
Normal file
12716
archive/vue2-demo/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
37
archive/vue2-demo/package.json
Normal file
37
archive/vue2-demo/package.json
Normal file
@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "@iconify/vue-demo",
|
||||
"version": "1.0.2",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^2.6.12",
|
||||
"vue-class-component": "^7.2.5",
|
||||
"vue-property-decorator": "^8.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-icons/bx": "^1.0.0",
|
||||
"@iconify-icons/dashicons": "^1.0.0",
|
||||
"@iconify/vue": "^1.0.3",
|
||||
"@typescript-eslint/eslint-plugin": "^2.34.0",
|
||||
"@typescript-eslint/parser": "^2.34.0",
|
||||
"@vue/cli-plugin-babel": "~4.2.3",
|
||||
"@vue/cli-plugin-eslint": "~4.2.3",
|
||||
"@vue/cli-plugin-typescript": "~4.2.3",
|
||||
"@vue/cli-service": "~4.2.3",
|
||||
"@vue/eslint-config-prettier": "^6.0.0",
|
||||
"@vue/eslint-config-typescript": "^5.0.2",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"core-js": "^3.6.5",
|
||||
"eslint": "^7.7.0",
|
||||
"eslint-loader": "^4.0.2",
|
||||
"eslint-plugin-prettier": "^3.1.4",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"prettier": "^2.0.5",
|
||||
"typescript": "^4.0.2",
|
||||
"vue-template-compiler": "^2.6.12"
|
||||
}
|
||||
}
|
||||
BIN
archive/vue2-demo/public/favicon.ico
Normal file
BIN
archive/vue2-demo/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
144
archive/vue2-demo/src/App.vue
Normal file
144
archive/vue2-demo/src/App.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<section>
|
||||
<h1>Usage</h1>
|
||||
<div>
|
||||
Empty Icon:
|
||||
<IconifyIcon />
|
||||
</div>
|
||||
<div>
|
||||
Icon referenced by name:
|
||||
<IconifyIcon icon="minus" />
|
||||
</div>
|
||||
<div>
|
||||
Icon referenced by object:
|
||||
<iconify-icon v-bind:icon="userIcon" inline="true" />
|
||||
</div>
|
||||
<div class="alert">
|
||||
<iconify-icon :icon="alertIcon" />
|
||||
Important notice with alert icon!
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Example file (components/usage/*.vue)</h1>
|
||||
<UsageExample />
|
||||
</section>
|
||||
|
||||
<VueAttributes />
|
||||
<InlineDemo />
|
||||
<AlignmentDemo />
|
||||
<TransformationsDemo />
|
||||
<StyleDemo />
|
||||
<ClassDemo />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
// import { PluginObject } from 'vue';
|
||||
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import paperclipIcon from '@iconify-icons/dashicons/paperclip';
|
||||
import bxMinusCircle from '@iconify-icons/bx/bx-minus-circle';
|
||||
import bxError from '@iconify-icons/bx/bx-error';
|
||||
import bxUser from '@iconify-icons/bx/bx-user';
|
||||
|
||||
import VueAttributes from './components/VueAttributes.vue';
|
||||
import InlineDemo from './components/Inline.vue';
|
||||
import AlignmentDemo from './components/Alignment.vue';
|
||||
import TransformationsDemo from './components/Transform.vue';
|
||||
import StyleDemo from './components/Style.vue';
|
||||
import ClassDemo from './components/Class.vue';
|
||||
import UsageExample from './components/usage/Object.vue';
|
||||
|
||||
// Vue.use((IconifyIcon as unknown) as PluginObject<unknown>);
|
||||
IconifyIcon.addIcon('minus', bxMinusCircle);
|
||||
IconifyIcon.addIcon('experiment', paperclipIcon);
|
||||
|
||||
// Add custom icon as 'experiment2'
|
||||
IconifyIcon.addIcon('experiment2', {
|
||||
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"/>',
|
||||
});
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
IconifyIcon,
|
||||
VueAttributes,
|
||||
InlineDemo,
|
||||
AlignmentDemo,
|
||||
TransformationsDemo,
|
||||
StyleDemo,
|
||||
ClassDemo,
|
||||
UsageExample,
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
userIcon: bxUser,
|
||||
alertIcon: bxError,
|
||||
};
|
||||
},
|
||||
})
|
||||
export default class App extends Vue {}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
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;
|
||||
}
|
||||
section {
|
||||
border-bottom: 1px dotted #ccc;
|
||||
padding: 16px;
|
||||
}
|
||||
section:last-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
section:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
h1 {
|
||||
margin: 0 0 16px;
|
||||
padding: 0;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
p {
|
||||
margin: 12px 0 4px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 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 svg {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
font-size: 24px;
|
||||
line-height: 1em;
|
||||
margin: -0.5em 0 0;
|
||||
}
|
||||
</style>
|
||||
321
archive/vue2-demo/src/components/Alignment.vue
Normal file
321
archive/vue2-demo/src/components/Alignment.vue
Normal file
@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<section>
|
||||
<h1>Alignment (components/Alignment.vue)</h1>
|
||||
<div>
|
||||
<p>Icon with correct width/heigh ratio:</p>
|
||||
<iconify-icon icon="experiment" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Bad width/height ratio, default alignment (slice = false):</p>
|
||||
<iconify-icon icon="experiment" width="2em" height="1em" />
|
||||
<iconify-icon icon="experiment" width="1em" height="2em" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Slice:</p>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
align="slice"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Slice:</p>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
align="slice"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Left:</p>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
hAlign="left"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
h-align="left"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
horizontalAlign="left"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
horizontal-align="left"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
align="left"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Left with slice:</p>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
hAlign="left"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
h-align="left"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
horizontalAlign="left"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
horizontal-align="left"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
align="left,slice"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Right:</p>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
hAlign="right"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
h-align="right"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
horizontalAlign="right"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
horizontal-align="right"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
align="right"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Right with slice:</p>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
hAlign="right"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
h-align="right"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
horizontalAlign="right"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
horizontal-align="right"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
align="right,slice"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Top:</p>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
verticalAlign="top"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
vertical-align="top"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
v-bind:v-align="'top'"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
align="top"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Top with slice:</p>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
verticalAlign="top"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
vertical-align="top"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
v-bind:v-align="'top'"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
align="top"
|
||||
:slice="true"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Bottom:</p>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
verticalAlign="bottom"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
vertical-align="bottom"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
v-bind:v-align="'bottom'"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
align="bottom"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Bottom with slice:</p>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
verticalAlign="bottom"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
vertical-align="bottom"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
v-bind:v-align="'bottom'"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
align="bottom,slice"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
svg {
|
||||
color: #06a;
|
||||
font-size: 32px;
|
||||
line-height: 1em;
|
||||
margin-right: 8px;
|
||||
box-shadow: 0 0 0 1px #ccc;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
45
archive/vue2-demo/src/components/Class.vue
Normal file
45
archive/vue2-demo/src/components/Class.vue
Normal file
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<section>
|
||||
<h1>Class (components/Class.vue)</h1>
|
||||
<div>
|
||||
Default icon:
|
||||
<iconify-icon icon="experiment" />
|
||||
</div>
|
||||
<div>
|
||||
Red color:
|
||||
<iconify-icon icon="experiment" class="red-color" />
|
||||
<iconify-icon icon="experiment" :class="redClass" />
|
||||
</div>
|
||||
<div>
|
||||
Red color and 20px:
|
||||
<iconify-icon icon="experiment" class="red-color big-icon" />
|
||||
<iconify-icon icon="experiment" :class="[redClass, bigIcon]" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
redClass: 'red-color',
|
||||
bigIcon: 'big-icon',
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.red-color {
|
||||
color: red;
|
||||
}
|
||||
.big-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
67
archive/vue2-demo/src/components/Inline.vue
Normal file
67
archive/vue2-demo/src/components/Inline.vue
Normal file
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<section>
|
||||
<h1>Inline (components/Inline.vue)</h1>
|
||||
<div>
|
||||
Block icon (behaving like image):
|
||||
<iconify-icon icon="experiment2" />
|
||||
</div>
|
||||
<div>
|
||||
Inline icon (behaving line text / icon font):
|
||||
<iconify-icon icon="experiment2" :inline="true" />
|
||||
</div>
|
||||
<div>
|
||||
Using "vertical-align: 0" to override inline attribute:
|
||||
<iconify-icon icon="experiment2" :style="{ verticalAlign: 0 }" />
|
||||
<iconify-icon
|
||||
icon="experiment2"
|
||||
:style="{ verticalAlign: 0 }"
|
||||
:inline="true"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
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;
|
||||
}
|
||||
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>
|
||||
59
archive/vue2-demo/src/components/Style.vue
Normal file
59
archive/vue2-demo/src/components/Style.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<section>
|
||||
<h1>Style (components/Style.vue)</h1>
|
||||
<div>
|
||||
Default icon:
|
||||
<iconify-icon icon="experiment" />
|
||||
</div>
|
||||
<div>
|
||||
Red color:
|
||||
<iconify-icon icon="experiment" color="red" />
|
||||
<iconify-icon icon="experiment" :style="{ color: 'red' }" />
|
||||
<iconify-icon icon="experiment" style="color: red;" />
|
||||
<iconify-icon icon="experiment" :style="redIcon" />
|
||||
</div>
|
||||
<div>
|
||||
40px:
|
||||
<iconify-icon icon="experiment" height="40" />
|
||||
<iconify-icon icon="experiment" :width="40" />
|
||||
<iconify-icon icon="experiment" :style="{ fontSize: '40px' }" />
|
||||
<iconify-icon icon="experiment" style="font-size: 40px;" />
|
||||
<iconify-icon icon="experiment" :style="bigIcon" />
|
||||
</div>
|
||||
<div>
|
||||
Red and 40px:
|
||||
<iconify-icon icon="experiment" height="40" color="red" />
|
||||
<iconify-icon icon="experiment" :width="40" :style="redIcon" />
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
:style="{ color: 'red', fontSize: '40px' }"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
style="color: red; font-size: 40px;"
|
||||
/>
|
||||
<iconify-icon icon="experiment" :style="[bigIcon, redIcon]" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
redIcon: {
|
||||
color: 'red',
|
||||
},
|
||||
bigIcon: {
|
||||
fontSize: '40px',
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
70
archive/vue2-demo/src/components/Transform.vue
Normal file
70
archive/vue2-demo/src/components/Transform.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<section>
|
||||
<h1>Transformations (components/Transform.vue)</h1>
|
||||
<div>
|
||||
Default icon:
|
||||
<iconify-icon icon="experiment" />
|
||||
</div>
|
||||
<div>
|
||||
Flip horizontally:
|
||||
<iconify-icon icon="experiment" :hFlip="true" />
|
||||
<iconify-icon icon="experiment" flip="horizontal" />
|
||||
<iconify-icon icon="experiment" :horizontal-flip="true" />
|
||||
<iconify-icon icon="experiment" :h-flip="true" />
|
||||
</div>
|
||||
<div>
|
||||
Flip vertically:
|
||||
<iconify-icon icon="experiment" :vFlip="true" />
|
||||
<iconify-icon icon="experiment" flip="vertical" />
|
||||
<iconify-icon icon="experiment" :vertical-flip="true" />
|
||||
<iconify-icon icon="experiment" :v-flip="true" />
|
||||
</div>
|
||||
<div>
|
||||
Flip horizontally and vertically:
|
||||
<iconify-icon icon="experiment" :hFlip="true" :vFlip="true" />
|
||||
<iconify-icon icon="experiment" flip="horizontal,vertical" />
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
:horizontal-flip="true"
|
||||
:vertical-flip="true"
|
||||
/>
|
||||
<iconify-icon icon="experiment" :h-flip="true" :v-flip="true" />
|
||||
</div>
|
||||
<div>
|
||||
90° rotation:
|
||||
<iconify-icon icon="experiment" :rotate="1" />
|
||||
<iconify-icon icon="experiment" rotate="90deg" />
|
||||
<iconify-icon icon="experiment" rotate="25%" />
|
||||
</div>
|
||||
<div>
|
||||
180° rotation:
|
||||
<iconify-icon icon="experiment" :rotate="2" />
|
||||
<iconify-icon icon="experiment" rotate="180deg" />
|
||||
<iconify-icon icon="experiment" rotate="50%" />
|
||||
</div>
|
||||
<div>
|
||||
270° rotation:
|
||||
<iconify-icon icon="experiment" :rotate="3" />
|
||||
<iconify-icon icon="experiment" rotate="270deg" />
|
||||
<iconify-icon icon="experiment" rotate="-25%" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
svg {
|
||||
font-size: 20px;
|
||||
line-height: 1em;
|
||||
}
|
||||
</style>
|
||||
132
archive/vue2-demo/src/components/VueAttributes.vue
Normal file
132
archive/vue2-demo/src/components/VueAttributes.vue
Normal file
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<section>
|
||||
<h1>Vue attributes (components/VueAttributes.vue)</h1>
|
||||
<div>
|
||||
Icon with color (red):
|
||||
<iconify-icon :icon="icon" color="red" :inline="true" />
|
||||
</div>
|
||||
<div>
|
||||
Icon size (2em):
|
||||
<IconifyIcon icon="admin-users" height="2em" />
|
||||
</div>
|
||||
<div>
|
||||
Icon style as string (red):
|
||||
<IconifyIcon icon="admin-users" style="color: red;" />
|
||||
</div>
|
||||
<div>
|
||||
Inline icon with vertical-align style as string (aligned to top):
|
||||
<IconifyIcon
|
||||
icon="admin-users"
|
||||
style="vertical-align: .25em;"
|
||||
:inline="true"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
Inline icon with bound style as object (purple, 2em, no alignment):
|
||||
<IconifyIcon
|
||||
icon="admin-users"
|
||||
v-bind:style="icon1StyleObj"
|
||||
:inline="true"
|
||||
color="green"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
Inline icon with bound style as string (purple, 2em, no alignment):
|
||||
<IconifyIcon
|
||||
icon="admin-users"
|
||||
v-bind:style="icon1StyleStr"
|
||||
:inline="true"
|
||||
color="green"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
Combined styles (green, 2em, shadow):
|
||||
<IconifyIcon
|
||||
icon="admin-users"
|
||||
v-bind:style="[boxShadowStyleObj, fontSizeStyleObj2]"
|
||||
:inline="true"
|
||||
color="green"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
Dynamic style (red / green, shadow):
|
||||
<IconifyIcon
|
||||
icon="admin-users"
|
||||
v-bind:style="[boxShadowStyleObj, dynamicStyleObj]"
|
||||
:inline="true"
|
||||
v-on:click="
|
||||
dynamicStyleObj.color =
|
||||
dynamicStyleObj.color === 'red' ? 'green' : 'red'
|
||||
"
|
||||
/> (click it!)
|
||||
</div>
|
||||
<div>
|
||||
Dynamic style (shadow / color):
|
||||
<IconifyIcon
|
||||
icon="admin-users"
|
||||
v-bind:style="[
|
||||
showShadow ? boxShadowStyleObj : dynamicStyleObj,
|
||||
]"
|
||||
:inline="true"
|
||||
v-on:click="showShadow = !showShadow"
|
||||
/> (click it!)
|
||||
</div>
|
||||
<div>
|
||||
Reference:
|
||||
<IconifyIcon
|
||||
icon="admin-users"
|
||||
ref="icon1"
|
||||
@click="logReference"
|
||||
/> (click to log)
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import adminUsers from '@iconify-icons/dashicons/admin-users';
|
||||
|
||||
IconifyIcon.addIcon('admin-users', adminUsers);
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
icon: adminUsers,
|
||||
icon1StyleObj: {
|
||||
fontSize: '2em',
|
||||
color: 'purple',
|
||||
verticalAlign: 0,
|
||||
},
|
||||
icon1StyleStr: 'color: purple; vertical-align: 0; font-size: 2em;',
|
||||
colorStyleStr: 'color: purple',
|
||||
colorStyleObj: {
|
||||
color: 'purple',
|
||||
},
|
||||
fontSizeStyleStr: 'font-size: 2em',
|
||||
fontSizeStyleObj: {
|
||||
fontSize: '2em',
|
||||
},
|
||||
fontSizeStyleObj2: {
|
||||
'font-size': '2em',
|
||||
},
|
||||
boxShadowStyleStr: 'box-shadow: 0 0 2px #000;',
|
||||
boxShadowStyleObj: {
|
||||
boxShadow: '0 0 2px #000',
|
||||
},
|
||||
dynamicStyleObj: {
|
||||
color: 'red',
|
||||
},
|
||||
showShadow: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
logReference: function() {
|
||||
console.log('References:', this.$refs);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
16
archive/vue2-demo/src/components/usage/Name.vue
Normal file
16
archive/vue2-demo/src/components/usage/Name.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<iconify-icon icon="customizer" height="20" :style="{ color: 'purple' }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import adminCustomizer from '@iconify-icons/dashicons/admin-customizer';
|
||||
|
||||
IconifyIcon.addIcon('customizer', adminCustomizer);
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
17
archive/vue2-demo/src/components/usage/NameTS.vue
Normal file
17
archive/vue2-demo/src/components/usage/NameTS.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<iconify-icon icon="customizer" height="20" :style="{ color: 'blue' }" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import adminCustomizer from '@iconify-icons/dashicons/admin-customizer';
|
||||
|
||||
IconifyIcon.addIcon('customizer', adminCustomizer);
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
21
archive/vue2-demo/src/components/usage/Object.vue
Normal file
21
archive/vue2-demo/src/components/usage/Object.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<iconify-icon :icon="icons.chart" height="20" :style="{ color: 'green' }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import adminCustomizer from '@iconify-icons/dashicons/admin-customizer';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: {
|
||||
chart: adminCustomizer,
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
22
archive/vue2-demo/src/components/usage/ObjectTS.vue
Normal file
22
archive/vue2-demo/src/components/usage/ObjectTS.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<iconify-icon :icon="icons.chart" height="20" :style="{ color: 'red' }" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import adminCustomizer from '@iconify-icons/dashicons/admin-customizer';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: {
|
||||
chart: adminCustomizer,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
39
archive/vue2-demo/tsconfig.json
Normal file
39
archive/vue2-demo/tsconfig.json
Normal file
@ -0,0 +1,39 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"module": "esnext",
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"importHelpers": true,
|
||||
"moduleResolution": "node",
|
||||
"experimentalDecorators": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"sourceMap": true,
|
||||
"baseUrl": ".",
|
||||
"types": [
|
||||
"webpack-env"
|
||||
],
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.vue",
|
||||
"tests/**/*.ts",
|
||||
"tests/**/*.tsx"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
8
archive/vue2/.babelrc
Normal file
8
archive/vue2/.babelrc
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"presets": [["env", { "modules": false }]],
|
||||
"env": {
|
||||
"test": {
|
||||
"presets": [["env", { "targets": { "node": "current" } }]]
|
||||
}
|
||||
}
|
||||
}
|
||||
2
archive/vue2/.eslintignore
Normal file
2
archive/vue2/.eslintignore
Normal file
@ -0,0 +1,2 @@
|
||||
lib
|
||||
dist
|
||||
17
archive/vue2/.eslintrc.js
Normal file
17
archive/vue2/.eslintrc.js
Normal file
@ -0,0 +1,17 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
browser: true,
|
||||
jest: true,
|
||||
es6: true,
|
||||
},
|
||||
settings: {
|
||||
'import/resolver': {
|
||||
node: {
|
||||
extensions: ['.js'],
|
||||
},
|
||||
},
|
||||
'import/extensions': ['.js'],
|
||||
},
|
||||
extends: ['plugin:vue/recommended'],
|
||||
};
|
||||
4
archive/vue2/.gitignore
vendored
Normal file
4
archive/vue2/.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
dist
|
||||
lib
|
||||
10
archive/vue2/.npmignore
Normal file
10
archive/vue2/.npmignore
Normal file
@ -0,0 +1,10 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
src
|
||||
lib
|
||||
tests
|
||||
api-extractor.json
|
||||
build.js
|
||||
tsconfig.json
|
||||
*.config.js
|
||||
|
||||
650
archive/vue2/README.md
Normal file
650
archive/vue2/README.md
Normal file
@ -0,0 +1,650 @@
|
||||
# Iconify for Vue 2
|
||||
|
||||
Iconify for Vue 2 is not yet another icon component! There are many of them already.
|
||||
|
||||
Iconify is the most versatile icon framework.
|
||||
|
||||
- Unified icon framework that can be used with any icon library.
|
||||
- Out of the box includes 80+ icon sets with 60,000 icons.
|
||||
- Embed icons in HTML with SVG framework or components for front-end frameworks.
|
||||
- Embed icons in designs with plug-ins for Figma, Sketch and Adobe XD.
|
||||
- Add icon search to your applications with Iconify Icon Finder.
|
||||
|
||||
For more information visit [https://iconify.design/](https://iconify.design/).
|
||||
|
||||
Iconify for Vue is a part of Iconify framework that makes it easy to use many icon libraries with Vue.
|
||||
|
||||
Iconify for Vue features:
|
||||
|
||||
- Easy to use.
|
||||
- Bundles only icons that you need.
|
||||
- Change icon size and colour by changing font size and colour.
|
||||
- Renders pixel-perfect SVG.
|
||||
|
||||
## Installation
|
||||
|
||||
If you are using NPM:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify/vue@1
|
||||
```
|
||||
|
||||
If you are using Yarn:
|
||||
|
||||
```bash
|
||||
yarn add --dev @iconify/vue@1
|
||||
```
|
||||
|
||||
If you are using Vue 2, it is important that you install `@iconify/vue@1`, not `@iconify/vue`, because `@iconify/vue` requires Vue 3.
|
||||
|
||||
This package does not include icons. Icons are split into separate packages that available at NPM. See below.
|
||||
|
||||
### Vue 3 compatibility
|
||||
|
||||
In Vue 3 functional components have changed and are not backwards compatible. Because of that, this component is not compatible with Vue 3.
|
||||
|
||||
Check out [Vue 3 version of icon component](https://github.com/iconify/iconify/tree/master/packages/vue).
|
||||
|
||||
## Usage
|
||||
|
||||
Install `@iconify/vue` and packages for selected icon sets. Import component from `@iconify/vue` and icon data for the icon you want to use:
|
||||
|
||||
```js
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import home from '@iconify-icons/mdi/home';
|
||||
import faceWithMonocle from '@iconify-icons/twemoji/face-with-monocle';
|
||||
```
|
||||
|
||||
Then you need to add component and icon.
|
||||
|
||||
There are two ways to use an icon: by icon name that you assign or by icon object.
|
||||
|
||||
### Object syntax
|
||||
|
||||
Object syntax passes icon data to the component.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<iconify-icon :icon="icons.chart" height="24" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import areaChartOutlined from '@iconify-icons/ant-design/area-chart-outlined';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: {
|
||||
chart: areaChartOutlined,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
The icon must be included in `data` function, so it could be referenced in the template.
|
||||
|
||||
The same example without TypeScript:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<iconify-icon :icon="icons.chart" height="24" :style="{ color: 'green' }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import areaChartOutlined from '@iconify-icons/ant-design/area-chart-outlined';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: {
|
||||
chart: areaChartOutlined,
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### String syntax
|
||||
|
||||
String syntax passes icon name to the component.
|
||||
|
||||
With this method the icon needs to be added only once. That means if you have multiple components using 'chart' icon, you can add it only in your main component. This makes it easy to swap icons for an entire application.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<iconify-icon icon="chart" height="24" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import areaChartOutlined from '@iconify-icons/ant-design/area-chart-outlined';
|
||||
|
||||
IconifyIcon.addIcon('chart', areaChartOutlined);
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
The icon must be registered using `addIcon` function of the component. You can assign any name to the icon.
|
||||
|
||||
The same example without TypeScript:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<iconify-icon icon="chart" height="24" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import areaChartOutlined from '@iconify-icons/ant-design/area-chart-outlined';
|
||||
|
||||
IconifyIcon.addIcon('chart', areaChartOutlined);
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## Component installation
|
||||
|
||||
You can install the icon component using `Vue.use()`, then you will no longer need to add it to every component that uses icons.
|
||||
|
||||
```js
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
|
||||
Vue.use(IconifyIcon);
|
||||
```
|
||||
|
||||
If you are using TypeScript with Vue, it becomes a bit more complex. You need to import type `PluginObject` from Vue and do some shenanigans with type casting:
|
||||
|
||||
```ts
|
||||
import { PluginObject } from 'vue';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
|
||||
Vue.use((IconifyIcon as unknown) as PluginObject<unknown>);
|
||||
```
|
||||
|
||||
After installing the icon component, you no longer need to list `IconifyIcon` in components list every time you use it.
|
||||
|
||||
## Icon component properties
|
||||
|
||||
`icon` property is mandatory. It tells component what icon to render. If the property value is invalid, the component will render an empty icon. The value can be a string containing the icon name (icon must be registered before use by calling `addIcon`, see instructions above) or an object containing the icon data.
|
||||
|
||||
The icon component has the following optional properties:
|
||||
|
||||
- `inline`. Changes icon behaviour to match icon fonts. See "Inline icon" section below.
|
||||
- `width` and `height`. Icon dimensions. The default values are "1em" for both. See "Dimensions" section below.
|
||||
- `color`. Icon colour. This is the same as setting colour in style. See "Icon colour" section below.
|
||||
- `flip`, `horizontalFlip`, `verticalFlip`. Flip icon horizontally and/or vertically. See "Transformations" section below.
|
||||
- `rotate`. Rotate icon by 90, 180 or 270 degrees. See "Transformations" section below.
|
||||
- `align`, `verticalAlign`, `horizontalAlign`, `slice`. Icon alignment. See "Alignment" section below.
|
||||
|
||||
Note: in templates you can use "camelCase" properties as "kebab-case". For example, `hFlip` can be used as `h-flip`.
|
||||
|
||||
### Other properties and events
|
||||
|
||||
In addition to the properties mentioned above, the icon component accepts any other properties and events. All other properties and events will be passed to generated `SVG` element, so you can do stuff like assigning click event, setting the inline style, create element reference, add title and so on.
|
||||
|
||||
### Dimensions
|
||||
|
||||
By default, icon height is "1em". With is dynamic, calculated using the icon's width to height ratio.
|
||||
|
||||
There are several ways to change icon dimensions:
|
||||
|
||||
- Setting `font-size` in style.
|
||||
- Setting `width` and/or `height` property.
|
||||
|
||||
Values for `width` and `height` can be numbers or strings.
|
||||
|
||||
If you set only one dimension, another dimension will be calculated using the icon's width to height ratio. For example, if the icon size is 16 x 24, you set the height to 48, the width will be set to 32. Calculations work not only with numbers, but also with string values.
|
||||
|
||||
#### Dimensions as numbers
|
||||
|
||||
You can use numbers for `width` and `height`.
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" :height="24" />
|
||||
```
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" :width="16" :height="16" />
|
||||
```
|
||||
|
||||
Note ":" before attribute - in Vue it changes the value to expression, so "20" is a number, not a string.
|
||||
|
||||
Number values are treated as pixels. That means in examples above, values are identical to "24px" and "16px".
|
||||
|
||||
#### Dimensions as strings without units
|
||||
|
||||
If you use strings without units, they are treated the same as numbers in an example above.
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" height="24" />
|
||||
```
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" width="16" height="16" />
|
||||
```
|
||||
|
||||
#### Dimensions as strings with units
|
||||
|
||||
You can use units in width and height values:
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" height="2em" />
|
||||
```
|
||||
|
||||
Be careful when using `calc`, view port based units or percentages. In SVG element they might not behave the way you expect them to behave and when using such units, you should consider settings both width and height.
|
||||
|
||||
#### Dimensions as 'auto'
|
||||
|
||||
Keyword "auto" sets dimensions to the icon's `viewBox` dimensions. For example, for 24 x 24 icon using `height="auto"` sets height to 24 pixels.
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" height="auto" />
|
||||
```
|
||||
|
||||
### Icon colour
|
||||
|
||||
There are two types of icons: icons that do not have a palette and icons that do have a palette.
|
||||
|
||||
Icons that do have a palette, such as emojis, cannot be customised. Setting colour to such icons will not change anything.
|
||||
|
||||
Icons that do not have a palette can be customised. By default, colour is set to "currentColor", which means the icon's colour matches text colour. To change the colour you can:
|
||||
|
||||
- Set `color` style or use stylesheet to target icon. If you are using the stylesheet, target `svg` element, not `iconify-icon`.
|
||||
- Add `color` property.
|
||||
|
||||
Examples:
|
||||
|
||||
Using `color` property:
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" color="red" />
|
||||
<iconify-icon icon="experiment" color="#f00" />
|
||||
```
|
||||
|
||||
Using inline style:
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" style="color: red;" />
|
||||
<iconify-icon icon="experiment" :style="{color: 'red'}" />
|
||||
<iconify-icon icon="experiment" :style="{color: '#f00'}" />
|
||||
```
|
||||
|
||||
Using stylesheet:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<iconify-icon icon="experiment" class="red-icon" />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.red-icon {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Transformations
|
||||
|
||||
You can rotate and flip the icon.
|
||||
|
||||
This might seem redundant because icon can also be rotated and flipped using CSS transformations. So why do transformation properties exist? Because it is a different type of transformation.
|
||||
|
||||
- CSS transformations transform the entire icon.
|
||||
- Icon transformations transform the contents of the icon.
|
||||
|
||||
If you have a square icon, this makes no difference. However, if you have an icon that has different width and height values, it makes a huge difference.
|
||||
|
||||
Rotating 16x24 icon by 90 degrees results in:
|
||||
|
||||
- CSS transformation keeps 16x24 bounding box, which might cause the icon to overlap text around it.
|
||||
- Icon transformation changes bounding box to 24x16, rotating content inside an icon.
|
||||
|
||||
_TODO: show visual example_
|
||||
|
||||
#### Flipping an icon
|
||||
|
||||
There are several properties available to flip an icon:
|
||||
|
||||
- `horizontal-flip` or `h-flip`: boolean property, flips icon horizontally.
|
||||
- `vertical-flip` or `v-flip`: boolean property, flips icon vertically.
|
||||
- `flip`: shorthand string property, can flip icon horizontally and/or vertically.
|
||||
|
||||
Examples:
|
||||
|
||||
Flip an icon horizontally:
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" :h-flip="true" />
|
||||
<iconify-icon icon="experiment" :horizontal-flip="true" />
|
||||
<iconify-icon icon="experiment" flip="horizontal" />
|
||||
```
|
||||
|
||||
Flip an icon vertically:
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" :v-flip="true" />
|
||||
<iconify-icon icon="experiment" :vertical-flip="true" />
|
||||
<iconify-icon icon="experiment" flip="vertical" />
|
||||
```
|
||||
|
||||
Flip an icon horizontally and vertically (the same as 180 degrees rotation):
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" :h-flip="true" :v-flip="true" />
|
||||
<iconify-icon icon="experiment" :horizontal-flip="true" :vertical-flip="true" />
|
||||
<iconify-icon icon="experiment" flip="horizontal,vertical" />
|
||||
```
|
||||
|
||||
Why are there multiple boolean properties for flipping an icon? See "Alignment" section below for the explanation.
|
||||
|
||||
#### Rotating an icon
|
||||
|
||||
An icon can be rotated by 90, 180 and 270 degrees. Only contents of the icon are rotated.
|
||||
|
||||
To rotate an icon, use `rotate` property. Value can be a string (degrees or percentages) or a number.
|
||||
|
||||
Number values are 1 for 90 degrees, 2 for 180 degrees, 3 for 270 degrees.
|
||||
|
||||
Examples of 90 degrees rotation:
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" :rotate="1" />
|
||||
<iconify-icon icon="experiment" rotate="90deg" />
|
||||
<iconify-icon icon="experiment" rotate="25%" />
|
||||
```
|
||||
|
||||
### Alignment
|
||||
|
||||
Alignment matters only if you set the icon's width and height properties that do not match the viewBox with and height.
|
||||
|
||||
For example, if the icon is 24x24 and you set the width to 32 and height to 24. You must set both `width` and `height` properties for this to happen or use stylesheet to set both icon's width and height.
|
||||
|
||||
#### Stretching SVG
|
||||
|
||||
When you use incorrect width/height ratio for other images, browser stretches those images.
|
||||
|
||||
Unlike other images, SVG elements do not stretch. Instead, browser either adds space on sides of the icon (this is the default behaviour) or crops part of the icon.
|
||||
|
||||
|
||||
|
||||
#### Alignment properties
|
||||
|
||||
You can control the behaviour of SVG when using incorrect width/height ratio by setting alignment properties:
|
||||
|
||||
- `horizontal-align` or `h-align`: string property to set horizontal alignment. Possible values are "left", "center" and "right".
|
||||
- `vertical-align` or `v-align`: string property to set vertical alignment. Possible values are "top", "middle" and "bottom".
|
||||
- `slice`: boolean property. See below.
|
||||
- `align`: shorthand string property. Value is the combination of vertical alignment values, horizontal alignment values, "meet" (same as `:slice="false"`) and "slice" (same as `:slice="true"`) separated by comma.
|
||||
|
||||
Why are there aliases for `h-align` and `v-align` properties? Because in Vue properties that start with `v-` are treated as directives. It is possible to use `v-align` property using a weird syntax (see example below), but it is much cleaner to have a different name for that property, so that is why Vue component has aliases for those properties. For more consistent properties, similar aliases were added to `h-flip` and `v-flip` properties.
|
||||
|
||||
Example of aligning an icon to the left if icon is not square:
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" width="1em" height="1em" h-align="left" />
|
||||
```
|
||||
|
||||
#### Slice
|
||||
|
||||
Slice property tells the browser how to deal with extra space.
|
||||
|
||||
By default, `slice` is disabled. The browser will scale the icon to fit the bounding box.
|
||||
|
||||
Example showing the icon behaviour when `slice` is disabled with various alignment values:
|
||||
|
||||
|
||||
|
||||
If `slice` is enabled, the browser will scale the icon to fill the bounding box and hide parts that do not fit.
|
||||
|
||||
Example showing the icon behaviour when `slice` is enabled with various alignment values:
|
||||
|
||||
|
||||
|
||||
### Inline
|
||||
|
||||
The icon component renders `SVG` elements. By default, `SVG` behave like images, which is different from icon fonts.
|
||||
|
||||
Many developers are used to working with icon fonts. Icon fonts render icons as text, not as images. Browsers align text differently than images:
|
||||
|
||||
- Images are vertically aligned at baseline.
|
||||
- Text is vertically aligned slightly below baseline.
|
||||
|
||||
By adding `inline` property, icon behaves like text. In inline mode icon has vertical alignment set to "-0.125em". That puts icon just below baseline, similar to icon fonts.
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<iconify-icon icon="experiment" :inline="true" />
|
||||
```
|
||||
|
||||
Value is boolean, therefore ":" must be added before property name, changing the value from string to expression.
|
||||
|
||||
Visual example to show the difference between inline and block modes:
|
||||
|
||||
|
||||
|
||||
## Icon Sets
|
||||
|
||||
You can find all available icons at https://iconify.design/icon-sets/
|
||||
|
||||
Browse or search icons, click any icon and you will see a "Vue" tab that will give you exact code for the Vue component.
|
||||
|
||||
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:
|
||||
|
||||
### Material Design Icons
|
||||
|
||||
Package: https://www.npmjs.com/package/@iconify-icons/mdi
|
||||
|
||||
Icons list: https://iconify.design/icon-sets/mdi/
|
||||
|
||||
Installation:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify-icons/mdi
|
||||
```
|
||||
|
||||
Usage (in this example using object syntax):
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<iconify-icon :icon="icons.account" />
|
||||
<iconify-icon :icon="icons.home" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import homeIcon from '@iconify-icons/mdi/home';
|
||||
import accountIcon from '@iconify-icons/mdi/account';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: {
|
||||
home: homeIcon,
|
||||
account: accountIcon,
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### Simple Icons (big collection of logos)
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
Usage (in this example using string syntax):
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<p>
|
||||
Mozilla Firefox <iconify-icon icon="firefox" :inline="true" /> is the
|
||||
best browser!
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import mozillafirefoxIcon from '@iconify-icons/simple-icons/mozillafirefox';
|
||||
|
||||
IconifyIcon.addIcon('firefox', mozillafirefoxIcon);
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### DashIcons
|
||||
|
||||
Package: https://www.npmjs.com/package/@iconify-icons/dashicons
|
||||
|
||||
Icons list: https://iconify.design/icon-sets/dashicons/
|
||||
|
||||
Installation:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify-icons/dashicons
|
||||
```
|
||||
|
||||
Usage (in this example using object syntax with TypeScript):
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<p>
|
||||
<iconify-icon :icon="icons.rotate" />
|
||||
Rotate!
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import imageRotate from '@iconify-icons/dashicons/image-rotate';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: {
|
||||
rotate: imageRotate,
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
svg {
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
vertical-align: -0.25em; /* moves icon 5px below baseline */
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### OpenMoji
|
||||
|
||||
Package: https://www.npmjs.com/package/@iconify-icons/openmoji
|
||||
|
||||
Icons list: https://iconify.design/icon-sets/openmoji/
|
||||
|
||||
Installation:
|
||||
|
||||
```bash
|
||||
npm install --save-dev @iconify-icons/openmoji
|
||||
```
|
||||
|
||||
Usage:
|
||||
|
||||
Usage (in this example using string syntax with TypeScript):
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<p>
|
||||
<iconify-icon icon="autonomous-car" /> Autonomous cars are the future!
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import autonomousCar from '@iconify-icons/openmoji/autonomous-car';
|
||||
import exhaustGasesCar from '@iconify-icons/openmoji/exhaust-gases-car';
|
||||
|
||||
IconifyIcon.addIcon('autonomous-car', autonomousCar);
|
||||
IconifyIcon.addIcon('gas-car', exhaustGasesCar);
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
IconifyIcon,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
svg {
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
vertical-align: -0.25em; /* moves icon 5px below baseline */
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Other icon sets
|
||||
|
||||
There are over 60 icon sets. This readme shows only a few examples. See [Iconify icon sets](http://iconify.design/icon-sets/) for a full list of available icon sets. Click any icon to see code.
|
||||
|
||||
## License
|
||||
|
||||
Vue component is released with MIT license.
|
||||
|
||||
© 2020 Iconify OÜ
|
||||
|
||||
See [Iconify icon sets page](https://iconify.design/icon-sets/) for list of collections and their licenses.
|
||||
43
archive/vue2/api-extractor.json
Normal file
43
archive/vue2/api-extractor.json
Normal file
@ -0,0 +1,43 @@
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
|
||||
"mainEntryPointFilePath": "lib/IconifyIcon.d.ts",
|
||||
"bundledPackages": [
|
||||
"@iconify/types",
|
||||
"@iconify/core",
|
||||
"@cyberalien/redundancy"
|
||||
],
|
||||
"compiler": {},
|
||||
"apiReport": {
|
||||
"enabled": false
|
||||
},
|
||||
"docModel": {
|
||||
"enabled": false
|
||||
},
|
||||
"dtsRollup": {
|
||||
"enabled": true,
|
||||
"untrimmedFilePath": "<projectFolder>/dist/IconifyIcon.d.ts"
|
||||
},
|
||||
"tsdocMetadata": {
|
||||
"enabled": false
|
||||
},
|
||||
"messages": {
|
||||
"compilerMessageReporting": {
|
||||
"default": {
|
||||
"logLevel": "warning"
|
||||
}
|
||||
},
|
||||
"extractorMessageReporting": {
|
||||
"default": {
|
||||
"logLevel": "warning"
|
||||
},
|
||||
"ae-missing-release-tag": {
|
||||
"logLevel": "none"
|
||||
}
|
||||
},
|
||||
"tsdocMessageReporting": {
|
||||
"default": {
|
||||
"logLevel": "warning"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
118
archive/vue2/build.js
Normal file
118
archive/vue2/build.js
Normal file
@ -0,0 +1,118 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const child_process = require('child_process');
|
||||
|
||||
// const packagesDir = path.dirname(path.dirname(__dirname)) + '/packages';
|
||||
|
||||
// List of commands to run
|
||||
const commands = [];
|
||||
|
||||
// Parse command line
|
||||
const compile = {
|
||||
// core: false,
|
||||
lib: true,
|
||||
dist: true,
|
||||
api: true,
|
||||
};
|
||||
|
||||
// Disable compiling dependencies because project was moved to archive
|
||||
/*
|
||||
process.argv.slice(2).forEach((cmd) => {
|
||||
if (cmd.slice(0, 2) !== '--') {
|
||||
return;
|
||||
}
|
||||
const parts = cmd.slice(2).split('-');
|
||||
if (parts.length === 2) {
|
||||
// Parse 2 part commands like --with-lib
|
||||
const key = parts.pop();
|
||||
if (compile[key] === void 0) {
|
||||
return;
|
||||
}
|
||||
switch (parts.shift()) {
|
||||
case 'with':
|
||||
// enable module
|
||||
compile[key] = true;
|
||||
break;
|
||||
|
||||
case 'without':
|
||||
// disable module
|
||||
compile[key] = false;
|
||||
break;
|
||||
|
||||
case 'only':
|
||||
// disable other modules
|
||||
Object.keys(compile).forEach((key2) => {
|
||||
compile[key2] = key2 === key;
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Check if required modules in same monorepo are available
|
||||
const fileExists = (file) => {
|
||||
try {
|
||||
fs.statSync(file);
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
if (compile.dist && !fileExists(packagesDir + '/vue/lib/IconifyIcon.js')) {
|
||||
compile.lib = true;
|
||||
}
|
||||
|
||||
if (compile.api && !fileExists(packagesDir + '/vue/lib/IconifyIcon.d.ts')) {
|
||||
compile.lib = true;
|
||||
}
|
||||
|
||||
if (compile.lib && !fileExists(packagesDir + '/core/lib/modules.js')) {
|
||||
compile.core = true;
|
||||
}
|
||||
|
||||
// Compile core before compiling this package
|
||||
if (compile.core) {
|
||||
commands.push({
|
||||
cmd: 'npm',
|
||||
args: ['run', 'build'],
|
||||
cwd: packagesDir + '/core',
|
||||
});
|
||||
}
|
||||
*/
|
||||
|
||||
// Compile other packages
|
||||
Object.keys(compile).forEach((key) => {
|
||||
if (key !== 'core' && compile[key]) {
|
||||
commands.push({
|
||||
cmd: 'npm',
|
||||
args: ['run', 'build:' + key],
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Run next command
|
||||
*/
|
||||
const next = () => {
|
||||
const item = commands.shift();
|
||||
if (item === void 0) {
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
if (item.cwd === void 0) {
|
||||
item.cwd = __dirname;
|
||||
}
|
||||
|
||||
const result = child_process.spawnSync(item.cmd, item.args, {
|
||||
cwd: item.cwd,
|
||||
stdio: 'inherit',
|
||||
});
|
||||
|
||||
if (result.status === 0) {
|
||||
process.nextTick(next);
|
||||
} else {
|
||||
process.exit(result.status);
|
||||
}
|
||||
};
|
||||
next();
|
||||
9
archive/vue2/jest.config.js
Normal file
9
archive/vue2/jest.config.js
Normal file
@ -0,0 +1,9 @@
|
||||
module.exports = {
|
||||
verbose: true,
|
||||
moduleFileExtensions: ['js', 'json', 'vue'],
|
||||
transform: {
|
||||
'.*\\.(vue)$': 'vue-jest',
|
||||
'^.+\\.js$': '<rootDir>/node_modules/babel-jest',
|
||||
},
|
||||
collectCoverage: false,
|
||||
};
|
||||
21
archive/vue2/license.txt
Normal file
21
archive/vue2/license.txt
Normal file
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020 Vjacheslav Trushkin
|
||||
|
||||
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.
|
||||
10430
archive/vue2/package-lock.json
generated
Normal file
10430
archive/vue2/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
48
archive/vue2/package.json
Normal file
48
archive/vue2/package.json
Normal file
@ -0,0 +1,48 @@
|
||||
{
|
||||
"name": "@iconify/vue",
|
||||
"description": "Iconify icon component for Vue.",
|
||||
"author": "Vjacheslav Trushkin",
|
||||
"version": "1.0.4",
|
||||
"license": "MIT",
|
||||
"bugs": "https://github.com/iconify/iconify/issues",
|
||||
"homepage": "https://iconify.design/",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/iconify/iconify.git",
|
||||
"directory": "archive/vue2"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "node build",
|
||||
"build:lib": "tsc -b",
|
||||
"build:dist": "rollup -c rollup.config.js",
|
||||
"build:api": "api-extractor run --local --verbose",
|
||||
"pretest": "npm run build",
|
||||
"test": "jest"
|
||||
},
|
||||
"main": "dist/IconifyIcon.umd.js",
|
||||
"module": "dist/IconifyIcon.esm.js",
|
||||
"types": "dist/IconifyIcon.d.ts",
|
||||
"peerDependencies": {
|
||||
"vue": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify/core": "^1.0.0-beta.4",
|
||||
"@iconify/types": "^1.0.3",
|
||||
"@microsoft/api-extractor": "^7.9.9",
|
||||
"@rollup/plugin-buble": "^0.21.3",
|
||||
"@rollup/plugin-commonjs": "^11.1.0",
|
||||
"@rollup/plugin-node-resolve": "^7.1.3",
|
||||
"@types/jest": "^26.0.10",
|
||||
"@vue/test-utils": "^1.0.4",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-jest": "^25.5.1",
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"jest": "^26.4.2",
|
||||
"rollup": "^2.26.5",
|
||||
"rollup-plugin-terser": "^7.0.0",
|
||||
"typescript": "^4.0.2",
|
||||
"vue": "^2.6.12",
|
||||
"vue-jest": "^3.0.6",
|
||||
"vue-template-compiler": "^2.6.12"
|
||||
}
|
||||
}
|
||||
78
archive/vue2/rollup.config.js
Normal file
78
archive/vue2/rollup.config.js
Normal file
@ -0,0 +1,78 @@
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import buble from '@rollup/plugin-buble';
|
||||
// import { terser } from 'rollup-plugin-terser';
|
||||
|
||||
const name = 'IconifyIcon';
|
||||
|
||||
// Module footer
|
||||
const footer = `
|
||||
// Export as ES module
|
||||
if (typeof exports === 'object') {
|
||||
try {
|
||||
exports.__esModule = true;
|
||||
exports.default = ${name};
|
||||
} catch (err) {
|
||||
}
|
||||
}`;
|
||||
|
||||
// Export configuration
|
||||
const config = [
|
||||
// ES Module
|
||||
{
|
||||
input: `lib/${name}.js`,
|
||||
output: [
|
||||
{
|
||||
file: `dist/${name}.esm.js`,
|
||||
format: 'esm',
|
||||
exports: 'named',
|
||||
},
|
||||
],
|
||||
plugins: [resolve(), commonjs(), buble()],
|
||||
},
|
||||
// UMD Module
|
||||
{
|
||||
input: `lib/${name}.js`,
|
||||
output: [
|
||||
{
|
||||
file: `dist/${name}.umd.js`,
|
||||
format: 'umd',
|
||||
name,
|
||||
exports: 'named',
|
||||
},
|
||||
],
|
||||
plugins: [resolve(), commonjs(), buble()],
|
||||
},
|
||||
/*
|
||||
// Web and module
|
||||
// "unpkg": "dist/IconifyIcon.min.js",
|
||||
|
||||
{
|
||||
input: `lib/${name}.js`,
|
||||
output: [
|
||||
{
|
||||
file: `dist/${name}.js`,
|
||||
name,
|
||||
format: 'iife',
|
||||
footer,
|
||||
},
|
||||
],
|
||||
plugins: [resolve(), commonjs(), buble()],
|
||||
},
|
||||
// Web
|
||||
{
|
||||
input: `lib/${name}.js`,
|
||||
output: [
|
||||
{
|
||||
file: `dist/${name}.min.js`,
|
||||
name,
|
||||
exports: 'named',
|
||||
format: 'iife',
|
||||
},
|
||||
],
|
||||
plugins: [resolve(), commonjs(), buble(), terser()],
|
||||
},
|
||||
*/
|
||||
];
|
||||
|
||||
export default config;
|
||||
318
archive/vue2/src/IconifyIcon.ts
Normal file
318
archive/vue2/src/IconifyIcon.ts
Normal file
@ -0,0 +1,318 @@
|
||||
import _Vue, { PluginFunction, VueConstructor, VNode, VNodeData } from 'vue';
|
||||
import { FunctionalRenderContext } from 'vue/src/core';
|
||||
|
||||
import { IconifyIcon as IconifyIconData } from '@iconify/types';
|
||||
import {
|
||||
IconifyIconCustomisations as IconCustomisations,
|
||||
FullIconCustomisations,
|
||||
defaults,
|
||||
IconifyHorizontalIconAlignment,
|
||||
IconifyVerticalIconAlignment,
|
||||
IconifyIconSize,
|
||||
} from '@iconify/core/lib/customisations';
|
||||
import {
|
||||
flipFromString,
|
||||
alignmentFromString,
|
||||
} from '@iconify/core/lib/customisations/shorthand';
|
||||
import { rotateFromString } from '@iconify/core/lib/customisations/rotate';
|
||||
import { fullIcon } from '@iconify/core/lib/icon';
|
||||
import { iconToSVG } from '@iconify/core/lib/builder';
|
||||
import { replaceIDs } from '@iconify/core/lib/builder/ids';
|
||||
import { merge } from '@iconify/core/lib/misc/merge';
|
||||
|
||||
/**
|
||||
* Export types that could be used in component
|
||||
*/
|
||||
export {
|
||||
IconifyIconData,
|
||||
IconifyHorizontalIconAlignment,
|
||||
IconifyVerticalIconAlignment,
|
||||
IconifyIconSize,
|
||||
};
|
||||
|
||||
// Allow rotation to be string
|
||||
/**
|
||||
* Icon customisations
|
||||
*/
|
||||
export type IconifyIconCustomisations = IconCustomisations & {
|
||||
rotate?: string | number;
|
||||
};
|
||||
|
||||
/**
|
||||
* Icon properties
|
||||
*/
|
||||
export interface IconifyIconProps extends IconifyIconCustomisations {
|
||||
icon: IconifyIconData;
|
||||
|
||||
// Style
|
||||
color?: string;
|
||||
|
||||
// Shorthand properties
|
||||
flip?: string;
|
||||
align?: string;
|
||||
|
||||
// Aliases for alignment because "v-align" is treated like directive
|
||||
horizontalAlign?: IconifyHorizontalIconAlignment;
|
||||
verticalAlign?: IconifyVerticalIconAlignment;
|
||||
|
||||
// Aliases for flip because "v-flip" is treated like directive
|
||||
horizontalFlip?: boolean;
|
||||
verticalFlip?: boolean;
|
||||
}
|
||||
|
||||
// Interface for functional component context that is missing in Vue types.
|
||||
// Missing some unused stuff: children, slots, scopedSlots, injections
|
||||
// interface FunctionalRenderContext {
|
||||
// props: { [key: string]: unknown };
|
||||
// data?: VNodeData;
|
||||
// parent?: VNode;
|
||||
// listeners?: object; // alias of data.on
|
||||
// }
|
||||
|
||||
/**
|
||||
* Default SVG attributes
|
||||
*/
|
||||
const svgDefaults = {
|
||||
'xmlns': 'http://www.w3.org/2000/svg',
|
||||
'xmlns:xlink': 'http://www.w3.org/1999/xlink',
|
||||
'aria-hidden': true,
|
||||
'focusable': false,
|
||||
'role': 'img',
|
||||
};
|
||||
|
||||
/**
|
||||
* Aliases for customisations.
|
||||
* In Vue 'v-' properties are reserved, so v-align and v-flip must be renamed
|
||||
*/
|
||||
const customisationAliases = {
|
||||
horizontalAlign: 'hAlign',
|
||||
verticalAlign: 'vAlign',
|
||||
horizontalFlip: 'hFlip',
|
||||
verticalFlip: 'vFlip',
|
||||
};
|
||||
|
||||
/**
|
||||
* Storage for icons referred by name
|
||||
*/
|
||||
const storage: Record<string, Required<IconifyIconData>> = Object.create(null);
|
||||
|
||||
/**
|
||||
* Interface for style variable
|
||||
*/
|
||||
type VNodeStyle = (string | Record<string, unknown>)[];
|
||||
|
||||
/**
|
||||
* IconifyIcon component
|
||||
*/
|
||||
const IconifyIcon = {
|
||||
name: 'IconifyIcon',
|
||||
functional: true,
|
||||
|
||||
/**
|
||||
* Render icon
|
||||
*
|
||||
* @param createElement
|
||||
* @param context
|
||||
*/
|
||||
render(
|
||||
createElement: typeof _Vue.prototype.$createElement,
|
||||
context: FunctionalRenderContext
|
||||
): VNode {
|
||||
const props = context.props;
|
||||
|
||||
// Split properties
|
||||
const icon =
|
||||
typeof props.icon === 'string'
|
||||
? storage[props.icon]
|
||||
: fullIcon(props.icon);
|
||||
if (!icon) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const customisations = merge(
|
||||
defaults,
|
||||
props as IconifyIconCustomisations
|
||||
) as FullIconCustomisations;
|
||||
const componentProps = merge(svgDefaults);
|
||||
|
||||
// Copy style
|
||||
let stylesList: VNodeStyle;
|
||||
let styleString: string;
|
||||
let isStyleString = false;
|
||||
let hasStyle = true;
|
||||
|
||||
function setStyle(value: unknown): boolean {
|
||||
if (typeof value === 'string') {
|
||||
// Style as string
|
||||
styleString = value;
|
||||
isStyleString = true;
|
||||
return true;
|
||||
}
|
||||
if (typeof value !== 'object') {
|
||||
// Unknown type ???
|
||||
return false;
|
||||
}
|
||||
|
||||
stylesList = value instanceof Array ? value.slice(0) : [value];
|
||||
return true;
|
||||
}
|
||||
|
||||
const contextData = context.data;
|
||||
if (
|
||||
!contextData ||
|
||||
(!setStyle(contextData.staticStyle) && !setStyle(contextData.style))
|
||||
) {
|
||||
stylesList = [];
|
||||
hasStyle = false;
|
||||
}
|
||||
|
||||
// Get element properties
|
||||
for (let key in props) {
|
||||
const value = props[key];
|
||||
switch (key) {
|
||||
// Properties to ignore
|
||||
case 'icon':
|
||||
case 'style':
|
||||
break;
|
||||
|
||||
// Flip as string: 'horizontal,vertical'
|
||||
case 'flip':
|
||||
flipFromString(customisations, value);
|
||||
break;
|
||||
|
||||
// Alignment as string
|
||||
case 'align':
|
||||
alignmentFromString(customisations, value);
|
||||
break;
|
||||
|
||||
// Color: copy to style
|
||||
case 'color':
|
||||
if (isStyleString) {
|
||||
styleString = 'color: ' + value + '; ' + styleString;
|
||||
} else {
|
||||
stylesList.unshift({
|
||||
color: value,
|
||||
});
|
||||
}
|
||||
hasStyle = true;
|
||||
break;
|
||||
|
||||
// Rotation as string
|
||||
case 'rotate':
|
||||
if (typeof value !== 'number') {
|
||||
customisations[key] = rotateFromString(value);
|
||||
} else {
|
||||
componentProps[key] = value;
|
||||
}
|
||||
break;
|
||||
|
||||
// Remove aria-hidden
|
||||
case 'ariaHidden':
|
||||
case 'aria-hidden':
|
||||
// Vue transforms 'aria-hidden' property to 'ariaHidden'
|
||||
if (value !== true && value !== 'true') {
|
||||
delete componentProps['aria-hidden'];
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
if (customisationAliases[key] !== void 0) {
|
||||
// Aliases for customisations
|
||||
customisations[customisationAliases[key]] = value;
|
||||
} else if (defaults[key] === void 0) {
|
||||
// Copy missing property if it does not exist in customisations
|
||||
componentProps[key] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Generate icon
|
||||
const item = iconToSVG(icon, customisations);
|
||||
|
||||
// Add icon stuff
|
||||
for (let key in item.attributes) {
|
||||
componentProps[key] = item.attributes[key];
|
||||
}
|
||||
|
||||
if (item.inline) {
|
||||
if (isStyleString) {
|
||||
styleString = 'vertical-align: -0.125em; ' + styleString;
|
||||
} else {
|
||||
stylesList.unshift({
|
||||
verticalAlign: '-0.125em',
|
||||
});
|
||||
}
|
||||
hasStyle = true;
|
||||
}
|
||||
|
||||
// Generate node data
|
||||
const data: VNodeData = {
|
||||
attrs: componentProps,
|
||||
domProps: {
|
||||
innerHTML: replaceIDs(item.body),
|
||||
},
|
||||
};
|
||||
if (hasStyle) {
|
||||
data.style = isStyleString ? styleString : stylesList;
|
||||
}
|
||||
|
||||
if (contextData) {
|
||||
['on', 'ref'].forEach((attr) => {
|
||||
if (contextData[attr] !== void 0) {
|
||||
data[attr] = contextData[attr];
|
||||
}
|
||||
});
|
||||
['staticClass', 'class'].forEach((attr) => {
|
||||
if (contextData[attr] !== void 0) {
|
||||
data.class = contextData[attr];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return createElement('svg', data);
|
||||
},
|
||||
|
||||
/**
|
||||
* Add icon to storage that can later be used by name, for example: <iconify-icon icon="home" />
|
||||
*/
|
||||
addIcon: (name: string, data: IconifyIconData) => {
|
||||
storage[name] = fullIcon(data);
|
||||
},
|
||||
};
|
||||
|
||||
// Install function
|
||||
interface InstallFunction extends PluginFunction<unknown> {
|
||||
installed?: boolean;
|
||||
}
|
||||
interface InstallableComponent extends VueConstructor<_Vue> {
|
||||
install: InstallFunction;
|
||||
}
|
||||
|
||||
const install: InstallFunction = function installIconifyIcon(Vue: typeof _Vue) {
|
||||
if (install.installed) return;
|
||||
install.installed = true;
|
||||
Vue.component('IconifyIcon', IconifyIcon);
|
||||
};
|
||||
|
||||
// Create module definition for Vue.use()
|
||||
const plugin = {
|
||||
install,
|
||||
};
|
||||
|
||||
// Auto-install when vue is found (eg. in browser via <script> tag)
|
||||
let GlobalVue = null;
|
||||
if (typeof window !== 'undefined') {
|
||||
GlobalVue = window.Vue;
|
||||
} else if (typeof global !== 'undefined') {
|
||||
GlobalVue = ((global as unknown) as Record<string, unknown>).Vue;
|
||||
}
|
||||
if (GlobalVue) {
|
||||
GlobalVue.use(plugin);
|
||||
}
|
||||
|
||||
// Inject install function into component - allows component
|
||||
// to be registered via Vue.use() as well as Vue.component()
|
||||
((IconifyIcon as unknown) as InstallableComponent).install = install;
|
||||
|
||||
// Export component
|
||||
export default IconifyIcon;
|
||||
498
archive/vue2/tests/icon.test.js
Normal file
498
archive/vue2/tests/icon.test.js
Normal file
@ -0,0 +1,498 @@
|
||||
import { mount } from '@vue/test-utils';
|
||||
import IconifyIcon from '../';
|
||||
|
||||
const iconData = {
|
||||
body:
|
||||
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
|
||||
width: 24,
|
||||
height: 24,
|
||||
};
|
||||
|
||||
const iconDataWithID = {
|
||||
body:
|
||||
'<defs><path id="ssvg-id-1st-place-medala" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medald" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medalf" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medalh" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medalj" d="M.93.01h120.55v58.36H.93z"/><path id="ssvg-id-1st-place-medalm" d="M.93.01h120.55v58.36H.93z"/><path d="M52.849 78.373v-3.908c3.681-.359 6.25-.958 7.703-1.798c1.454-.84 2.54-2.828 3.257-5.962h4.021v40.385h-5.437V78.373h-9.544z" id="ssvg-id-1st-place-medalp"/><linearGradient x1="49.998%" y1="-13.249%" x2="49.998%" y2="90.002%" id="ssvg-id-1st-place-medalb"><stop stop-color="#1E88E5" offset="13.55%"/><stop stop-color="#1565C0" offset="93.8%"/></linearGradient><linearGradient x1="26.648%" y1="2.735%" x2="77.654%" y2="105.978%" id="ssvg-id-1st-place-medalk"><stop stop-color="#64B5F6" offset="13.55%"/><stop stop-color="#2196F3" offset="94.62%"/></linearGradient><radialGradient cx="22.368%" cy="12.5%" fx="22.368%" fy="12.5%" r="95.496%" id="ssvg-id-1st-place-medalo"><stop stop-color="#FFEB3B" offset="29.72%"/><stop stop-color="#FBC02D" offset="95.44%"/></radialGradient></defs><g fill="none" fill-rule="evenodd"><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medalc" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medala"/></mask><path fill="url(#ssvg-id-1st-place-medalb)" fill-rule="nonzero" mask="url(#ssvg-id-1st-place-medalc)" d="M45.44 42.18h31.43l30-48.43H75.44z"/></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medale" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medald"/></mask><g opacity=".2" mask="url(#ssvg-id-1st-place-medale)" fill="#424242" fill-rule="nonzero"><path d="M101.23-3L75.2 39H50.85L77.11-3h24.12zm5.64-3H75.44l-30 48h31.42l30.01-48z"/></g></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medalg" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medalf"/></mask><path d="M79 30H43c-4.42 0-8 3.58-8 8v16.04c0 2.17 1.8 3.95 4.02 3.96h.01c2.23-.01 4.97-1.75 4.97-3.96V44c0-1.1.9-2 2-2h30c1.1 0 2 .9 2 2v9.93c0 1.98 2.35 3.68 4.22 4.04c.26.05.52.08.78.08c2.21 0 4-1.79 4-4V38c0-4.42-3.58-8-8-8z" fill="#FDD835" fill-rule="nonzero" mask="url(#ssvg-id-1st-place-medalg)"/></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medali" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medalh"/></mask><g opacity=".2" mask="url(#ssvg-id-1st-place-medali)" fill="#424242" fill-rule="nonzero"><path d="M79 32c3.31 0 6 2.69 6 6v16.04A2.006 2.006 0 0 1 82.59 56c-1.18-.23-2.59-1.35-2.59-2.07V44c0-2.21-1.79-4-4-4H46c-2.21 0-4 1.79-4 4v10.04c0 .88-1.64 1.96-2.97 1.96c-1.12-.01-2.03-.89-2.03-1.96V38c0-3.31 2.69-6 6-6h36zm0-2H43c-4.42 0-8 3.58-8 8v16.04c0 2.17 1.8 3.95 4.02 3.96h.01c2.23-.01 4.97-1.75 4.97-3.96V44c0-1.1.9-2 2-2h30c1.1 0 2 .9 2 2v9.93c0 1.98 2.35 3.68 4.22 4.04c.26.05.52.08.78.08c2.21 0 4-1.79 4-4V38c0-4.42-3.58-8-8-8z"/></g></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medall" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medalj"/></mask><path fill="url(#ssvg-id-1st-place-medalk)" fill-rule="nonzero" mask="url(#ssvg-id-1st-place-medall)" d="M76.87 42.18H45.44l-30-48.43h31.43z"/></g><g transform="translate(3 4)"><mask id="ssvg-id-1st-place-medaln" fill="#fff"><use xlink:href="#ssvg-id-1st-place-medalm"/></mask><g opacity=".2" mask="url(#ssvg-id-1st-place-medaln)" fill="#424242" fill-rule="nonzero"><path d="M45.1-3l26.35 42H47.1L20.86-3H45.1zm1.77-3H15.44l30 48h31.42L46.87-6z"/></g></g><circle fill="url(#ssvg-id-1st-place-medalo)" fill-rule="nonzero" cx="64" cy="86" r="38"/><path d="M64 51c19.3 0 35 15.7 35 35s-15.7 35-35 35s-35-15.7-35-35s15.7-35 35-35zm0-3c-20.99 0-38 17.01-38 38s17.01 38 38 38s38-17.01 38-38s-17.01-38-38-38z" opacity=".2" fill="#424242" fill-rule="nonzero"/><path d="M47.3 63.59h33.4v44.4H47.3z"/><use fill="#000" xlink:href="#ssvg-id-1st-place-medalp"/><use fill="#FFA000" xlink:href="#ssvg-id-1st-place-medalp"/></g>',
|
||||
width: 128,
|
||||
height: 128,
|
||||
};
|
||||
|
||||
// Spacing for HTML matches
|
||||
const spacing = (count) => {
|
||||
return '\n' + ' '.repeat(count);
|
||||
};
|
||||
|
||||
describe('Mounting component', () => {
|
||||
test('with wrapper', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon />`,
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
});
|
||||
|
||||
test('without wrapper', () => {
|
||||
const wrapper = mount(IconifyIcon, {});
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"></svg>'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Rendering icon', () => {
|
||||
test('as object', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
};
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
spacing(1) +
|
||||
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path>' +
|
||||
spacing(0) +
|
||||
'</svg>'
|
||||
);
|
||||
});
|
||||
|
||||
test('as string', () => {
|
||||
const iconName = 'test-string';
|
||||
IconifyIcon.addIcon(iconName, iconData);
|
||||
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconName,
|
||||
};
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
spacing(1) +
|
||||
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path>' +
|
||||
spacing(0) +
|
||||
'</svg>'
|
||||
);
|
||||
});
|
||||
|
||||
test('replacing id', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconDataWithID,
|
||||
};
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).not.toMatch('id="ssvg-id-1st-place-medala"');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Passing attributes', () => {
|
||||
test('title', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' title='Icon!' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
};
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" title="Icon!" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
spacing(1) +
|
||||
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path>' +
|
||||
spacing(0) +
|
||||
'</svg>'
|
||||
);
|
||||
});
|
||||
|
||||
test('aria-hidden', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :aria-hidden='false' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
};
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
spacing(1) +
|
||||
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path>' +
|
||||
spacing(0) +
|
||||
'</svg>'
|
||||
);
|
||||
});
|
||||
|
||||
test('ariaHidden', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :ariaHidden='false' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
};
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
spacing(1) +
|
||||
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path>' +
|
||||
spacing(0) +
|
||||
'</svg>'
|
||||
);
|
||||
});
|
||||
|
||||
test('attributes that cannot change', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' viewBox='0 0 0 0' preserveAspectRatio='none' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
};
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
// same values, but different order
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" width="1em" height="1em">' +
|
||||
spacing(1) +
|
||||
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path>' +
|
||||
spacing(0) +
|
||||
'</svg>'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Dimensions', () => {
|
||||
test('height', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :height='height' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
height: 24,
|
||||
};
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
spacing(1) +
|
||||
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path>' +
|
||||
spacing(0) +
|
||||
'</svg>'
|
||||
);
|
||||
});
|
||||
|
||||
test('width and height', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :width='width' :height='height' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
width: 32, // as number
|
||||
height: '48', // as string
|
||||
};
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="32" height="48" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
spacing(1) +
|
||||
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path>' +
|
||||
spacing(0) +
|
||||
'</svg>'
|
||||
);
|
||||
});
|
||||
|
||||
test('auto', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :height='height' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
height: 'auto',
|
||||
};
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
spacing(1) +
|
||||
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path>' +
|
||||
spacing(0) +
|
||||
'</svg>'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Rotation', () => {
|
||||
test('number', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :rotate='rotate' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
rotate: 1,
|
||||
};
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('rotate(90 ');
|
||||
});
|
||||
|
||||
test('string', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' rotate='270deg' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
};
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('rotate(-90 ');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Flip', () => {
|
||||
test('boolean', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :horizontalFlip='horizontalFlip' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
horizontalFlip: true,
|
||||
};
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('scale(-1 1)');
|
||||
});
|
||||
|
||||
test('string', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' flip='vertical' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
};
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('scale(1 -1)');
|
||||
});
|
||||
|
||||
test('string and boolean', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' flip='horizontal' :verticalFlip='true' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
};
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
// horizontal + vertical = 180deg rotation
|
||||
expect(item.html()).toMatch('rotate(180 ');
|
||||
});
|
||||
|
||||
test('string for boolean attribute', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' horizontalFlip='true' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
};
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('scale(-1 1)');
|
||||
});
|
||||
|
||||
test('shorthand and boolean', () => {
|
||||
// 'flip' is processed after 'hFlip', overwriting value
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' flip='horizontal' :hFlip='false' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
};
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('scale(-1 1)');
|
||||
});
|
||||
|
||||
test('shorthand and boolean as string', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' flip='vertical' horizontalFlip='true' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
};
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
// horizontal + vertical = 180deg rotation
|
||||
expect(item.html()).toMatch('rotate(180 ');
|
||||
});
|
||||
|
||||
test('wrong case', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :verticalflip='verticalflip' :horizontalflip='true' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
verticalflip: true,
|
||||
};
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).not.toMatch('scale(');
|
||||
expect(item.html()).not.toMatch('rotate(');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Alignment and slice', () => {
|
||||
test('vAlign and slice', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' vAlign='top' :slice='true' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
};
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('preserveAspectRatio="xMidYMin slice"');
|
||||
});
|
||||
|
||||
test('string', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' align='left bottom' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
};
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('preserveAspectRatio="xMinYMax meet"');
|
||||
});
|
||||
|
||||
test('Alignment aliases', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' verticalAlign='top' horizontalAlign='right' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
};
|
||||
},
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('preserveAspectRatio="xMaxYMin meet"');
|
||||
});
|
||||
});
|
||||
14
archive/vue2/tsconfig.json
Normal file
14
archive/vue2/tsconfig.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"outDir": "./lib",
|
||||
"target": "ES2019",
|
||||
"module": "ESNext",
|
||||
"declaration": true,
|
||||
"sourceMap": false,
|
||||
"strict": false,
|
||||
"moduleResolution": "node",
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
}
|
||||
}
|
||||
62
packages/browser-tests/package-lock.json
generated
62
packages/browser-tests/package-lock.json
generated
@ -10,29 +10,6 @@
|
||||
"integrity": "sha512-/tx5GpGSyMn5FrOSggDSm9yJDLcEXiK0+zdCBssST6w9QgdJjoQ9lRBSxql/3vgQoI+7XbubWsP86jjbuVnFcA==",
|
||||
"dev": true
|
||||
},
|
||||
"@iconify/core": {
|
||||
"version": "1.0.0-beta.4",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-beta.4.tgz",
|
||||
"integrity": "sha512-yQSCNRG9qbdjCfyo/TofdzMOHrhrtlk1J11IeDxwiEoX9hYLLHwyHaHNsL+ictVtCgJI4CYiVryEESnhxOPF1w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@cyberalien/redundancy": "^1.0.0",
|
||||
"@iconify/types": "^1.0.3",
|
||||
"axios": "^0.19.2"
|
||||
}
|
||||
},
|
||||
"@iconify/iconify": {
|
||||
"version": "2.0.0-beta.6",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.0.0-beta.6.tgz",
|
||||
"integrity": "sha512-4HMMKniJHQutHcWx7Z1TaHVRXnkAA0aD7D5zhbu93pKmcFOArW88HxmuJQY2hHQIEOg98zDlJu2SYNa5gMEnOQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@iconify/types": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.0.3.tgz",
|
||||
"integrity": "sha512-FJvID3jDE1axAiVPUU8+ANeYt8neG1hlSX8g+GFLUaTW6aLMtYx6F2CY1jj9N/unClwdQPtXCE7qORqEBvtVaQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@rollup/plugin-buble": {
|
||||
"version": "0.21.3",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-buble/-/plugin-buble-0.21.3.tgz",
|
||||
@ -179,16 +156,6 @@
|
||||
"integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
|
||||
"dev": true
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.19.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
|
||||
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"follow-redirects": "1.5.10"
|
||||
}
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
|
||||
@ -464,35 +431,6 @@
|
||||
"is-buffer": "~2.0.3"
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.5.10",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
|
||||
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"debug": "=3.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
|
||||
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"fs.realpath": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
|
||||
|
||||
5
packages/core/package-lock.json
generated
5
packages/core/package-lock.json
generated
@ -29,11 +29,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@cyberalien/redundancy/-/redundancy-1.0.0.tgz",
|
||||
"integrity": "sha512-/tx5GpGSyMn5FrOSggDSm9yJDLcEXiK0+zdCBssST6w9QgdJjoQ9lRBSxql/3vgQoI+7XbubWsP86jjbuVnFcA=="
|
||||
},
|
||||
"@iconify/types": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.0.3.tgz",
|
||||
"integrity": "sha512-FJvID3jDE1axAiVPUU8+ANeYt8neG1hlSX8g+GFLUaTW6aLMtYx6F2CY1jj9N/unClwdQPtXCE7qORqEBvtVaQ=="
|
||||
},
|
||||
"@types/caseless": {
|
||||
"version": "0.12.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/caseless/-/caseless-0.12.2.tgz",
|
||||
|
||||
54
packages/iconify/package-lock.json
generated
54
packages/iconify/package-lock.json
generated
@ -36,23 +36,6 @@
|
||||
"integrity": "sha512-/tx5GpGSyMn5FrOSggDSm9yJDLcEXiK0+zdCBssST6w9QgdJjoQ9lRBSxql/3vgQoI+7XbubWsP86jjbuVnFcA==",
|
||||
"dev": true
|
||||
},
|
||||
"@iconify/core": {
|
||||
"version": "1.0.0-beta.4",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-beta.4.tgz",
|
||||
"integrity": "sha512-yQSCNRG9qbdjCfyo/TofdzMOHrhrtlk1J11IeDxwiEoX9hYLLHwyHaHNsL+ictVtCgJI4CYiVryEESnhxOPF1w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@cyberalien/redundancy": "^1.0.0",
|
||||
"@iconify/types": "^1.0.3",
|
||||
"axios": "^0.19.2"
|
||||
}
|
||||
},
|
||||
"@iconify/types": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.0.3.tgz",
|
||||
"integrity": "sha512-FJvID3jDE1axAiVPUU8+ANeYt8neG1hlSX8g+GFLUaTW6aLMtYx6F2CY1jj9N/unClwdQPtXCE7qORqEBvtVaQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@microsoft/api-extractor": {
|
||||
"version": "7.9.4",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.9.4.tgz",
|
||||
@ -267,16 +250,6 @@
|
||||
"sprintf-js": "~1.0.2"
|
||||
}
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.19.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
|
||||
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"follow-redirects": "1.5.10"
|
||||
}
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
|
||||
@ -379,16 +352,6 @@
|
||||
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
|
||||
"dev": true
|
||||
},
|
||||
"debug": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
|
||||
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"escape-string-regexp": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
|
||||
@ -410,16 +373,6 @@
|
||||
"to-regex-range": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.5.10",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
|
||||
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"debug": "=3.1.0"
|
||||
}
|
||||
},
|
||||
"fs-extra": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
|
||||
@ -613,13 +566,6 @@
|
||||
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
|
||||
"dev": true
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"once": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
|
||||
|
||||
6
packages/react-demo-with-api/package-lock.json
generated
6
packages/react-demo-with-api/package-lock.json
generated
@ -1203,12 +1203,6 @@
|
||||
"integrity": "sha512-Uy2u3vMPGWh2NQZvA0B9TO8+DK2e+H3SiJJtTmDODP8dTRaV8NIuJe76sex5QoFxbjUAXUXb0NZlCIIQXfZ/hQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@iconify/react-with-api": {
|
||||
"version": "1.0.0-beta.3",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/react-with-api/-/react-with-api-1.0.0-beta.3.tgz",
|
||||
"integrity": "sha512-usLATHRF1IBPg7rpj3e1apucCc32YxgH4gyQY4BGnzJUZp5g4uNKjypijKuQugQ9rVFNAsU14T2CqCky+r8P/w==",
|
||||
"dev": true
|
||||
},
|
||||
"@jest/console": {
|
||||
"version": "24.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@jest/console/-/console-24.9.0.tgz",
|
||||
|
||||
6
packages/react-demo/package-lock.json
generated
6
packages/react-demo/package-lock.json
generated
@ -1209,12 +1209,6 @@
|
||||
"integrity": "sha512-SX7iXhCFQEB1Tf9iP0Mb4WTorVQkeuMFQSLBJ3M/QPE62F/LXaJOohV7zBJ3zhitHu9oqCN3Xw6yn2IkQubGCg==",
|
||||
"dev": true
|
||||
},
|
||||
"@iconify/react": {
|
||||
"version": "2.0.0-beta.3",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/react/-/react-2.0.0-beta.3.tgz",
|
||||
"integrity": "sha512-3IP49wBzURdUPDnXqlcIiy2/pkgsxRUK77/igxNrIa072x6PSCFt6+iECTfru1pUuSdmqwmc/8qo4jIyUUkoLA==",
|
||||
"dev": true
|
||||
},
|
||||
"@jest/console": {
|
||||
"version": "24.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@jest/console/-/console-24.9.0.tgz",
|
||||
|
||||
109
packages/react-with-api/package-lock.json
generated
109
packages/react-with-api/package-lock.json
generated
@ -3594,35 +3594,6 @@
|
||||
"integrity": "sha512-/tx5GpGSyMn5FrOSggDSm9yJDLcEXiK0+zdCBssST6w9QgdJjoQ9lRBSxql/3vgQoI+7XbubWsP86jjbuVnFcA==",
|
||||
"dev": true
|
||||
},
|
||||
"@iconify/core": {
|
||||
"version": "1.0.0-beta.4",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-beta.4.tgz",
|
||||
"integrity": "sha512-yQSCNRG9qbdjCfyo/TofdzMOHrhrtlk1J11IeDxwiEoX9hYLLHwyHaHNsL+ictVtCgJI4CYiVryEESnhxOPF1w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@cyberalien/redundancy": "^1.0.0",
|
||||
"@iconify/types": "^1.0.3",
|
||||
"axios": "^0.19.2"
|
||||
}
|
||||
},
|
||||
"@iconify/iconify": {
|
||||
"version": "2.0.0-beta.6",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.0.0-beta.6.tgz",
|
||||
"integrity": "sha512-4HMMKniJHQutHcWx7Z1TaHVRXnkAA0aD7D5zhbu93pKmcFOArW88HxmuJQY2hHQIEOg98zDlJu2SYNa5gMEnOQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@iconify/react": {
|
||||
"version": "2.0.0-beta.3",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/react/-/react-2.0.0-beta.3.tgz",
|
||||
"integrity": "sha512-3IP49wBzURdUPDnXqlcIiy2/pkgsxRUK77/igxNrIa072x6PSCFt6+iECTfru1pUuSdmqwmc/8qo4jIyUUkoLA==",
|
||||
"dev": true
|
||||
},
|
||||
"@iconify/types": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.0.3.tgz",
|
||||
"integrity": "sha512-FJvID3jDE1axAiVPUU8+ANeYt8neG1hlSX8g+GFLUaTW6aLMtYx6F2CY1jj9N/unClwdQPtXCE7qORqEBvtVaQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@istanbuljs/load-nyc-config": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
|
||||
@ -4163,15 +4134,15 @@
|
||||
}
|
||||
},
|
||||
"@microsoft/api-extractor": {
|
||||
"version": "7.9.4",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.9.4.tgz",
|
||||
"integrity": "sha512-r4kqFO0unCuEcKQkEVBCw/L4YuU4larQ45iDVRFOyarER03I7FGiGy/iFoTXeN9CSnFGoXOYNokt0MkqzOYjtQ==",
|
||||
"version": "7.9.9",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.9.9.tgz",
|
||||
"integrity": "sha512-alqX4qmrSSS2HZHU6HivGv39/8Mknbew4L+qL3D3q6gWQhmDj7cLNOzS7pBp7yZrbt0jQfb/o8EgeTsRQL2T1A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@microsoft/api-extractor-model": "7.8.14",
|
||||
"@microsoft/api-extractor-model": "7.8.17",
|
||||
"@microsoft/tsdoc": "0.12.19",
|
||||
"@rushstack/node-core-library": "3.26.2",
|
||||
"@rushstack/ts-command-line": "4.4.7",
|
||||
"@rushstack/node-core-library": "3.29.0",
|
||||
"@rushstack/ts-command-line": "4.6.2",
|
||||
"colors": "~1.2.1",
|
||||
"lodash": "~4.17.15",
|
||||
"resolve": "~1.17.0",
|
||||
@ -4195,13 +4166,13 @@
|
||||
}
|
||||
},
|
||||
"@microsoft/api-extractor-model": {
|
||||
"version": "7.8.14",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/api-extractor-model/-/api-extractor-model-7.8.14.tgz",
|
||||
"integrity": "sha512-M29U8lfwCf/vadMpLsNWGyE+A5HNGulMzVoQtpQhDxbigEXqw0OYUDbWFdsdoMiNGk3jzPVz+AIks+EXJJP0OQ==",
|
||||
"version": "7.8.17",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/api-extractor-model/-/api-extractor-model-7.8.17.tgz",
|
||||
"integrity": "sha512-iyVdA1WTlwgddDJwJTedTFcpGjDoV9grq/JGP7rK2t4yo4kOE5XhLbi+BlZ3t5vuggFJf8LawDyomEb8tGtwRQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@microsoft/tsdoc": "0.12.19",
|
||||
"@rushstack/node-core-library": "3.26.2"
|
||||
"@rushstack/node-core-library": "3.29.0"
|
||||
}
|
||||
},
|
||||
"@microsoft/tsdoc": {
|
||||
@ -4261,14 +4232,15 @@
|
||||
}
|
||||
},
|
||||
"@rushstack/node-core-library": {
|
||||
"version": "3.26.2",
|
||||
"resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-3.26.2.tgz",
|
||||
"integrity": "sha512-gm4w4L+xhYAzZmBpZIyWHvqpa5fdtt9WpvBBhi/HjyIA/z472gZA3R3gZnGNaYw4y4/w2GkZL0IYhAGqLk7Qpw==",
|
||||
"version": "3.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-3.29.0.tgz",
|
||||
"integrity": "sha512-8mEfn7mUqqzANnOvi4/xTc0tJ6coQs3qywlOl86jiqZUaB4sRLo0MtzUQz0VtyRfan2fFuxKzIleJGtNTAwYQQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/node": "10.17.13",
|
||||
"colors": "~1.2.1",
|
||||
"fs-extra": "~7.0.1",
|
||||
"import-lazy": "~4.0.0",
|
||||
"jju": "~1.4.0",
|
||||
"semver": "~7.3.0",
|
||||
"timsort": "~0.3.0",
|
||||
@ -4284,14 +4256,15 @@
|
||||
}
|
||||
},
|
||||
"@rushstack/ts-command-line": {
|
||||
"version": "4.4.7",
|
||||
"resolved": "https://registry.npmjs.org/@rushstack/ts-command-line/-/ts-command-line-4.4.7.tgz",
|
||||
"integrity": "sha512-rBMMeH0a+43JvpEwtqVe1P+RlJmYe3rkHJctCIFXUHJWnmTCYNKB/Xp3LLzA/d4SsmAXXeKmbaOFXML7mwBveA==",
|
||||
"version": "4.6.2",
|
||||
"resolved": "https://registry.npmjs.org/@rushstack/ts-command-line/-/ts-command-line-4.6.2.tgz",
|
||||
"integrity": "sha512-wMjCrgiVYO5L1VkRKWv6EmisxduWuthOP4OghUPkl1kbbw9z2yZzQd9uk9rIqmGwOg8hjFX+0HrZCCXGHtABIQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/argparse": "1.0.38",
|
||||
"argparse": "~1.0.9",
|
||||
"colors": "~1.2.1"
|
||||
"colors": "~1.2.1",
|
||||
"string-argv": "~0.3.1"
|
||||
}
|
||||
},
|
||||
"@sinonjs/commons": {
|
||||
@ -4653,16 +4626,6 @@
|
||||
"integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==",
|
||||
"dev": true
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.19.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
|
||||
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"follow-redirects": "1.5.10"
|
||||
}
|
||||
},
|
||||
"babel-jest": {
|
||||
"version": "25.5.1",
|
||||
"resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-25.5.1.tgz",
|
||||
@ -5719,28 +5682,6 @@
|
||||
"to-regex-range": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.5.10",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
|
||||
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"debug": "=3.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
|
||||
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"for-in": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
|
||||
@ -6005,6 +5946,12 @@
|
||||
"safer-buffer": ">= 2.1.2 < 3"
|
||||
}
|
||||
},
|
||||
"import-lazy": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz",
|
||||
"integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==",
|
||||
"dev": true
|
||||
},
|
||||
"import-local": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/import-local/-/import-local-3.0.2.tgz",
|
||||
@ -9387,6 +9334,12 @@
|
||||
"integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=",
|
||||
"dev": true
|
||||
},
|
||||
"string-argv": {
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz",
|
||||
"integrity": "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==",
|
||||
"dev": true
|
||||
},
|
||||
"string-length": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/string-length/-/string-length-3.1.0.tgz",
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
"@iconify/iconify": "^2.0.0-beta.6",
|
||||
"@iconify/react": "^2.0.0-beta.3",
|
||||
"@iconify/types": "^1.0.3",
|
||||
"@microsoft/api-extractor": "^7.9.4",
|
||||
"@microsoft/api-extractor": "^7.9.9",
|
||||
"@rollup/plugin-buble": "^0.21.3",
|
||||
"@rollup/plugin-commonjs": "^11.1.0",
|
||||
"@rollup/plugin-node-resolve": "^7.1.3",
|
||||
@ -40,9 +40,8 @@
|
||||
"jest": "^25.5.4",
|
||||
"react": "^16.13.1",
|
||||
"react-test-renderer": "^16.13.1",
|
||||
"rollup": "^1.32.0",
|
||||
"rollup": "^1.32.1",
|
||||
"rollup-plugin-terser": "^7.0.0",
|
||||
"typescript": "^3.9.7"
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
}
|
||||
|
||||
62
packages/react/package-lock.json
generated
62
packages/react/package-lock.json
generated
@ -3691,29 +3691,6 @@
|
||||
"minimist": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"@cyberalien/redundancy": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@cyberalien/redundancy/-/redundancy-1.0.0.tgz",
|
||||
"integrity": "sha512-/tx5GpGSyMn5FrOSggDSm9yJDLcEXiK0+zdCBssST6w9QgdJjoQ9lRBSxql/3vgQoI+7XbubWsP86jjbuVnFcA==",
|
||||
"dev": true
|
||||
},
|
||||
"@iconify/core": {
|
||||
"version": "1.0.0-beta.4",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-beta.4.tgz",
|
||||
"integrity": "sha512-yQSCNRG9qbdjCfyo/TofdzMOHrhrtlk1J11IeDxwiEoX9hYLLHwyHaHNsL+ictVtCgJI4CYiVryEESnhxOPF1w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@cyberalien/redundancy": "^1.0.0",
|
||||
"@iconify/types": "^1.0.3",
|
||||
"axios": "^0.19.2"
|
||||
}
|
||||
},
|
||||
"@iconify/types": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.0.3.tgz",
|
||||
"integrity": "sha512-FJvID3jDE1axAiVPUU8+ANeYt8neG1hlSX8g+GFLUaTW6aLMtYx6F2CY1jj9N/unClwdQPtXCE7qORqEBvtVaQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@istanbuljs/load-nyc-config": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.0.0.tgz",
|
||||
@ -4794,16 +4771,6 @@
|
||||
"integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==",
|
||||
"dev": true
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.19.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
|
||||
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"follow-redirects": "1.5.10"
|
||||
}
|
||||
},
|
||||
"babel-jest": {
|
||||
"version": "25.5.1",
|
||||
"resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-25.5.1.tgz",
|
||||
@ -5855,35 +5822,6 @@
|
||||
"to-regex-range": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.5.10",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
|
||||
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"debug": "=3.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
|
||||
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"for-in": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
|
||||
|
||||
65
packages/sapper-demo/package-lock.json
generated
65
packages/sapper-demo/package-lock.json
generated
@ -2148,12 +2148,6 @@
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"@cyberalien/redundancy": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@cyberalien/redundancy/-/redundancy-1.0.0.tgz",
|
||||
"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",
|
||||
@ -2166,33 +2160,6 @@
|
||||
"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",
|
||||
"integrity": "sha512-yQSCNRG9qbdjCfyo/TofdzMOHrhrtlk1J11IeDxwiEoX9hYLLHwyHaHNsL+ictVtCgJI4CYiVryEESnhxOPF1w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@cyberalien/redundancy": "^1.0.0",
|
||||
"@iconify/types": "^1.0.3",
|
||||
"axios": "^0.19.2"
|
||||
}
|
||||
},
|
||||
"@iconify/svelte": {
|
||||
"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",
|
||||
"@iconify/types": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"@iconify/types": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.0.3.tgz",
|
||||
"integrity": "sha512-FJvID3jDE1axAiVPUU8+ANeYt8neG1hlSX8g+GFLUaTW6aLMtYx6F2CY1jj9N/unClwdQPtXCE7qORqEBvtVaQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@polka/url": {
|
||||
"version": "1.0.0-next.11",
|
||||
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.11.tgz",
|
||||
@ -2284,16 +2251,6 @@
|
||||
"color-convert": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.19.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
|
||||
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"follow-redirects": "1.5.10"
|
||||
}
|
||||
},
|
||||
"babel-plugin-dynamic-import-node": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
|
||||
@ -2585,28 +2542,6 @@
|
||||
"to-regex-range": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.5.10",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
|
||||
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"debug": "=3.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
|
||||
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"fsevents": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
|
||||
|
||||
70
packages/svelte-demo/package-lock.json
generated
70
packages/svelte-demo/package-lock.json
generated
@ -30,12 +30,6 @@
|
||||
"js-tokens": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"@cyberalien/redundancy": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@cyberalien/redundancy/-/redundancy-1.0.0.tgz",
|
||||
"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",
|
||||
@ -48,33 +42,6 @@
|
||||
"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",
|
||||
"integrity": "sha512-yQSCNRG9qbdjCfyo/TofdzMOHrhrtlk1J11IeDxwiEoX9hYLLHwyHaHNsL+ictVtCgJI4CYiVryEESnhxOPF1w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@cyberalien/redundancy": "^1.0.0",
|
||||
"@iconify/types": "^1.0.3",
|
||||
"axios": "^0.19.2"
|
||||
}
|
||||
},
|
||||
"@iconify/svelte": {
|
||||
"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",
|
||||
"@iconify/types": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"@iconify/types": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.0.3.tgz",
|
||||
"integrity": "sha512-FJvID3jDE1axAiVPUU8+ANeYt8neG1hlSX8g+GFLUaTW6aLMtYx6F2CY1jj9N/unClwdQPtXCE7qORqEBvtVaQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@polka/url": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@polka/url/-/url-0.5.0.tgz",
|
||||
@ -163,16 +130,6 @@
|
||||
"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
|
||||
"dev": true
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.19.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
|
||||
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"follow-redirects": "1.5.10"
|
||||
}
|
||||
},
|
||||
"binary-extensions": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
|
||||
@ -253,16 +210,6 @@
|
||||
"resolved": "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz",
|
||||
"integrity": "sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ=="
|
||||
},
|
||||
"debug": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
|
||||
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"escape-string-regexp": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
|
||||
@ -284,16 +231,6 @@
|
||||
"to-regex-range": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.5.10",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
|
||||
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"debug": "=3.1.0"
|
||||
}
|
||||
},
|
||||
"fsevents": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
|
||||
@ -463,13 +400,6 @@
|
||||
"resolved": "https://registry.npmjs.org/mri/-/mri-1.1.5.tgz",
|
||||
"integrity": "sha512-d2RKzMD4JNyHMbnbWnznPaa8vbdlq/4pNZ3IgdaGrVbBhebBsGUUE/6qorTMYNS6TwuH3ilfOlD2bf4Igh8CKg=="
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"normalize-path": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
|
||||
|
||||
53
packages/svelte/package-lock.json
generated
53
packages/svelte/package-lock.json
generated
@ -4,26 +4,6 @@
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"@cyberalien/redundancy": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@cyberalien/redundancy/-/redundancy-1.0.0.tgz",
|
||||
"integrity": "sha512-/tx5GpGSyMn5FrOSggDSm9yJDLcEXiK0+zdCBssST6w9QgdJjoQ9lRBSxql/3vgQoI+7XbubWsP86jjbuVnFcA=="
|
||||
},
|
||||
"@iconify/core": {
|
||||
"version": "1.0.0-beta.4",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/core/-/core-1.0.0-beta.4.tgz",
|
||||
"integrity": "sha512-yQSCNRG9qbdjCfyo/TofdzMOHrhrtlk1J11IeDxwiEoX9hYLLHwyHaHNsL+ictVtCgJI4CYiVryEESnhxOPF1w==",
|
||||
"requires": {
|
||||
"@cyberalien/redundancy": "^1.0.0",
|
||||
"@iconify/types": "^1.0.3",
|
||||
"axios": "^0.19.2"
|
||||
}
|
||||
},
|
||||
"@iconify/types": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-1.0.3.tgz",
|
||||
"integrity": "sha512-FJvID3jDE1axAiVPUU8+ANeYt8neG1hlSX8g+GFLUaTW6aLMtYx6F2CY1jj9N/unClwdQPtXCE7qORqEBvtVaQ=="
|
||||
},
|
||||
"@rollup/plugin-commonjs": {
|
||||
"version": "11.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-11.1.0.tgz",
|
||||
@ -84,15 +64,6 @@
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.19.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
|
||||
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"follow-redirects": "1.5.10"
|
||||
}
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
|
||||
@ -136,15 +107,6 @@
|
||||
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
|
||||
"dev": true
|
||||
},
|
||||
"debug": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
|
||||
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"estree-walker": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
|
||||
@ -160,15 +122,6 @@
|
||||
"to-regex-range": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.5.10",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
|
||||
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"debug": "=3.1.0"
|
||||
}
|
||||
},
|
||||
"fs.realpath": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
|
||||
@ -261,12 +214,6 @@
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
|
||||
"optional": true
|
||||
},
|
||||
"once": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
|
||||
|
||||
23
packages/vue-demo/.gitignore
vendored
23
packages/vue-demo/.gitignore
vendored
@ -1,21 +1,4 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
.DS_Store
|
||||
dist
|
||||
*.local
|
||||
@ -1,24 +1,19 @@
|
||||
# vue-demo
|
||||
|
||||
## Project setup
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
|
||||
```
|
||||
npm run serve
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
||||
13
packages/vue-demo/index.html
Normal file
13
packages/vue-demo/index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!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>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
13744
packages/vue-demo/package-lock.json
generated
13744
packages/vue-demo/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,36 +1,21 @@
|
||||
{
|
||||
"name": "@iconify/vue-demo",
|
||||
"version": "1.0.2",
|
||||
"version": "2.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
"dev": "vite",
|
||||
"build": "vite build"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.4",
|
||||
"vue": "^2.6.12",
|
||||
"vue-class-component": "^7.2.5",
|
||||
"vue-property-decorator": "^8.5.1"
|
||||
"vue": "^3.0.0-rc.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-icons/bx": "^1.0.0",
|
||||
"@iconify-icons/dashicons": "^1.0.0",
|
||||
"@iconify/vue": "^1.0.3",
|
||||
"@typescript-eslint/eslint-plugin": "^2.34.0",
|
||||
"@typescript-eslint/parser": "^2.34.0",
|
||||
"@vue/cli-plugin-babel": "~4.2.0",
|
||||
"@vue/cli-plugin-eslint": "~4.2.0",
|
||||
"@vue/cli-plugin-typescript": "~4.2.0",
|
||||
"@vue/cli-service": "~4.2.0",
|
||||
"@vue/eslint-config-prettier": "^6.0.0",
|
||||
"@vue/eslint-config-typescript": "^5.0.1",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-prettier": "^3.1.4",
|
||||
"eslint-plugin-vue": "^6.1.2",
|
||||
"prettier": "^1.19.1",
|
||||
"typescript": "~3.7.5",
|
||||
"vue-template-compiler": "^2.6.12"
|
||||
"@iconify/types": "^1.0.3",
|
||||
"@iconify/vue": "^2.0.0-beta.0",
|
||||
"@vue/compiler-sfc": "^3.0.0-rc.7",
|
||||
"typescript": "^4.0.2",
|
||||
"vite": "^1.0.0-rc.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,18 +4,19 @@
|
||||
<h1>Usage</h1>
|
||||
<div>
|
||||
Empty Icon:
|
||||
<IconifyIcon />
|
||||
<Icon />
|
||||
</div>
|
||||
<div>
|
||||
Icon referenced by name:
|
||||
<IconifyIcon icon="minus" />
|
||||
<Icon icon="minus" />
|
||||
</div>
|
||||
<div>
|
||||
Icon referenced by object:
|
||||
<iconify-icon v-bind:icon="userIcon" inline="true" />
|
||||
Icon referenced by object (also aligned below baseline, like
|
||||
icon from icon font):
|
||||
<InlineIcon v-bind:icon="userIcon" />
|
||||
</div>
|
||||
<div class="alert">
|
||||
<iconify-icon :icon="alertIcon" />
|
||||
<Icon :icon="alertIcon" />
|
||||
Important notice with alert icon!
|
||||
</div>
|
||||
</section>
|
||||
@ -34,10 +35,8 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
// import { PluginObject } from 'vue';
|
||||
import { Icon, InlineIcon, addIcon } from '@iconify/vue';
|
||||
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import paperclipIcon from '@iconify-icons/dashicons/paperclip';
|
||||
import bxMinusCircle from '@iconify-icons/bx/bx-minus-circle';
|
||||
import bxError from '@iconify-icons/bx/bx-error';
|
||||
@ -51,21 +50,25 @@ import StyleDemo from './components/Style.vue';
|
||||
import ClassDemo from './components/Class.vue';
|
||||
import UsageExample from './components/usage/Object.vue';
|
||||
|
||||
// Vue.use((IconifyIcon as unknown) as PluginObject<unknown>);
|
||||
IconifyIcon.addIcon('minus', bxMinusCircle);
|
||||
IconifyIcon.addIcon('experiment', paperclipIcon);
|
||||
addIcon('minus', bxMinusCircle);
|
||||
addIcon('experiment', paperclipIcon);
|
||||
|
||||
// Add custom icon as 'experiment2'
|
||||
IconifyIcon.addIcon('experiment2', {
|
||||
addIcon('experiment2', {
|
||||
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"/>',
|
||||
});
|
||||
|
||||
@Component({
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
IconifyIcon,
|
||||
// Component with inline="false" by default
|
||||
Icon,
|
||||
// Component with inline="true" by default
|
||||
InlineIcon,
|
||||
// Demo blocks
|
||||
VueAttributes,
|
||||
InlineDemo,
|
||||
AlignmentDemo,
|
||||
@ -74,71 +77,11 @@ IconifyIcon.addIcon('experiment2', {
|
||||
ClassDemo,
|
||||
UsageExample,
|
||||
},
|
||||
data: () => {
|
||||
data() {
|
||||
return {
|
||||
userIcon: bxUser,
|
||||
alertIcon: bxError,
|
||||
};
|
||||
},
|
||||
})
|
||||
export default class App extends Vue {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
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;
|
||||
}
|
||||
section {
|
||||
border-bottom: 1px dotted #ccc;
|
||||
padding: 16px;
|
||||
}
|
||||
section:last-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
section:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
h1 {
|
||||
margin: 0 0 16px;
|
||||
padding: 0;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
p {
|
||||
margin: 12px 0 4px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 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 svg {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
font-size: 24px;
|
||||
line-height: 1em;
|
||||
margin: -0.5em 0 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
packages/vue-demo/src/assets/logo.png
Normal file
BIN
packages/vue-demo/src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
@ -3,107 +3,72 @@
|
||||
<h1>Alignment (components/Alignment.vue)</h1>
|
||||
<div>
|
||||
<p>Icon with correct width/heigh ratio:</p>
|
||||
<iconify-icon icon="experiment" />
|
||||
<Icon icon="experiment" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Bad width/height ratio, default alignment (slice = false):</p>
|
||||
<iconify-icon icon="experiment" width="2em" height="1em" />
|
||||
<iconify-icon icon="experiment" width="1em" height="2em" />
|
||||
<Icon icon="experiment" width="2em" height="1em" />
|
||||
<Icon icon="experiment" width="1em" height="2em" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Slice:</p>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
align="slice"
|
||||
/>
|
||||
<Icon icon="experiment" width="2em" height="1em" :slice="true" />
|
||||
<Icon icon="experiment" width="2em" height="1em" align="slice" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Slice:</p>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
align="slice"
|
||||
/>
|
||||
<Icon icon="experiment" width="1em" height="2em" :slice="true" />
|
||||
<Icon icon="experiment" width="1em" height="2em" align="slice" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Left:</p>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
hAlign="left"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
h-align="left"
|
||||
/>
|
||||
<iconify-icon
|
||||
<Icon icon="experiment" width="2em" height="1em" hAlign="left" />
|
||||
<Icon icon="experiment" width="2em" height="1em" h-align="left" />
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
horizontalAlign="left"
|
||||
/>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
horizontal-align="left"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
align="left"
|
||||
/>
|
||||
<Icon icon="experiment" width="2em" height="1em" align="left" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Left with slice:</p>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
hAlign="left"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
h-align="left"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
horizontalAlign="left"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
horizontal-align="left"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
@ -112,68 +77,53 @@
|
||||
</div>
|
||||
<div>
|
||||
<p>Right:</p>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
hAlign="right"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
h-align="right"
|
||||
/>
|
||||
<iconify-icon
|
||||
<Icon icon="experiment" width="2em" height="1em" hAlign="right" />
|
||||
<Icon icon="experiment" width="2em" height="1em" h-align="right" />
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
horizontalAlign="right"
|
||||
/>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
horizontal-align="right"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
align="right"
|
||||
/>
|
||||
<Icon icon="experiment" width="2em" height="1em" align="right" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Right with slice:</p>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
hAlign="right"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
h-align="right"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
horizontalAlign="right"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
horizontal-align="right"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
@ -182,55 +132,50 @@
|
||||
</div>
|
||||
<div>
|
||||
<p>Top:</p>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
verticalAlign="top"
|
||||
/>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
vertical-align="top"
|
||||
/>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
v-bind:v-align="'top'"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
align="top"
|
||||
/>
|
||||
<Icon icon="experiment" width="1em" height="2em" align="top" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Top with slice:</p>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
verticalAlign="top"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
vertical-align="top"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
v-bind:v-align="'top'"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
@ -240,55 +185,50 @@
|
||||
</div>
|
||||
<div>
|
||||
<p>Bottom:</p>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
verticalAlign="bottom"
|
||||
/>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
vertical-align="bottom"
|
||||
/>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
v-bind:v-align="'bottom'"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
width="1em"
|
||||
height="2em"
|
||||
align="bottom"
|
||||
/>
|
||||
<Icon icon="experiment" width="1em" height="2em" align="bottom" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Bottom with slice:</p>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
verticalAlign="bottom"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
vertical-align="bottom"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
v-bind:v-align="'bottom'"
|
||||
:slice="true"
|
||||
/>
|
||||
<iconify-icon
|
||||
<Icon
|
||||
icon="experiment"
|
||||
width="2em"
|
||||
height="1em"
|
||||
@ -299,14 +239,13 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
|
||||
export default Vue.extend({
|
||||
export default {
|
||||
components: {
|
||||
IconifyIcon,
|
||||
Icon,
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -3,28 +3,27 @@
|
||||
<h1>Class (components/Class.vue)</h1>
|
||||
<div>
|
||||
Default icon:
|
||||
<iconify-icon icon="experiment" />
|
||||
<Icon icon="experiment" />
|
||||
</div>
|
||||
<div>
|
||||
Red color:
|
||||
<iconify-icon icon="experiment" class="red-color" />
|
||||
<iconify-icon icon="experiment" :class="redClass" />
|
||||
<Icon icon="experiment" class="red-color" />
|
||||
<Icon icon="experiment" :class="redClass" />
|
||||
</div>
|
||||
<div>
|
||||
Red color and 20px:
|
||||
<iconify-icon icon="experiment" class="red-color big-icon" />
|
||||
<iconify-icon icon="experiment" :class="[redClass, bigIcon]" />
|
||||
<Icon icon="experiment" class="red-color big-icon" />
|
||||
<Icon icon="experiment" :class="[redClass, bigIcon]" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
|
||||
export default Vue.extend({
|
||||
export default {
|
||||
components: {
|
||||
IconifyIcon,
|
||||
Icon,
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
@ -32,7 +31,7 @@ export default Vue.extend({
|
||||
bigIcon: 'big-icon',
|
||||
};
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@ -2,17 +2,19 @@
|
||||
<section>
|
||||
<h1>Inline (components/Inline.vue)</h1>
|
||||
<div>
|
||||
Block icon (behaving like image):
|
||||
<iconify-icon icon="experiment2" />
|
||||
Block icons (behaving like image):
|
||||
<Icon icon="experiment2" />
|
||||
<InlineIcon icon="experiment2" :inline="false" />
|
||||
</div>
|
||||
<div>
|
||||
Inline icon (behaving line text / icon font):
|
||||
<iconify-icon icon="experiment2" :inline="true" />
|
||||
Inline icons (behaving line text / icon font):
|
||||
<InlineIcon icon="experiment2" />
|
||||
<Icon icon="experiment2" :inline="true" />
|
||||
</div>
|
||||
<div>
|
||||
Using "vertical-align: 0" to override inline attribute:
|
||||
<iconify-icon icon="experiment2" :style="{ verticalAlign: 0 }" />
|
||||
<iconify-icon
|
||||
<inline-icon icon="experiment2" :style="{ verticalAlign: 0 }" />
|
||||
<icon
|
||||
icon="experiment2"
|
||||
:style="{ verticalAlign: 0 }"
|
||||
:inline="true"
|
||||
@ -22,14 +24,16 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import { Icon, InlineIcon } from '@iconify/vue';
|
||||
|
||||
export default Vue.extend({
|
||||
export default {
|
||||
components: {
|
||||
IconifyIcon,
|
||||
// Component with inline="false" by default
|
||||
Icon,
|
||||
// Component with inline="true" by default
|
||||
InlineIcon,
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -3,47 +3,43 @@
|
||||
<h1>Style (components/Style.vue)</h1>
|
||||
<div>
|
||||
Default icon:
|
||||
<iconify-icon icon="experiment" />
|
||||
<Icon icon="experiment" />
|
||||
</div>
|
||||
<div>
|
||||
Red color:
|
||||
<iconify-icon icon="experiment" color="red" />
|
||||
<iconify-icon icon="experiment" :style="{ color: 'red' }" />
|
||||
<iconify-icon icon="experiment" style="color: red;" />
|
||||
<iconify-icon icon="experiment" :style="redIcon" />
|
||||
<Icon icon="experiment" color="red" />
|
||||
<Icon icon="experiment" :style="{ color: 'red' }" />
|
||||
<Icon icon="experiment" style="color: red;" />
|
||||
<Icon icon="experiment" :style="redIcon" />
|
||||
</div>
|
||||
<div>
|
||||
40px:
|
||||
<iconify-icon icon="experiment" height="40" />
|
||||
<iconify-icon icon="experiment" :width="40" />
|
||||
<iconify-icon icon="experiment" :style="{ fontSize: '40px' }" />
|
||||
<iconify-icon icon="experiment" style="font-size: 40px;" />
|
||||
<iconify-icon icon="experiment" :style="bigIcon" />
|
||||
<Icon icon="experiment" height="40" />
|
||||
<Icon icon="experiment" :width="40" />
|
||||
<Icon icon="experiment" :style="{ fontSize: '40px' }" />
|
||||
<Icon icon="experiment" style="font-size: 40px;" />
|
||||
<Icon icon="experiment" :style="bigIcon" />
|
||||
</div>
|
||||
<div>
|
||||
Red and 40px:
|
||||
<iconify-icon icon="experiment" height="40" color="red" />
|
||||
<iconify-icon icon="experiment" :width="40" :style="redIcon" />
|
||||
<iconify-icon
|
||||
<Icon icon="experiment" height="40" color="red" />
|
||||
<Icon icon="experiment" :width="40" :style="redIcon" />
|
||||
<Icon
|
||||
icon="experiment"
|
||||
:style="{ color: 'red', fontSize: '40px' }"
|
||||
/>
|
||||
<iconify-icon
|
||||
icon="experiment"
|
||||
style="color: red; font-size: 40px;"
|
||||
/>
|
||||
<iconify-icon icon="experiment" :style="[bigIcon, redIcon]" />
|
||||
<Icon icon="experiment" style="color: red; font-size: 40px;" />
|
||||
<Icon icon="experiment" :style="[bigIcon, redIcon]" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
|
||||
export default Vue.extend({
|
||||
export default {
|
||||
components: {
|
||||
IconifyIcon,
|
||||
Icon,
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
@ -55,5 +51,5 @@ export default Vue.extend({
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -3,63 +3,62 @@
|
||||
<h1>Transformations (components/Transform.vue)</h1>
|
||||
<div>
|
||||
Default icon:
|
||||
<iconify-icon icon="experiment" />
|
||||
<Icon icon="experiment" />
|
||||
</div>
|
||||
<div>
|
||||
Flip horizontally:
|
||||
<iconify-icon icon="experiment" :hFlip="true" />
|
||||
<iconify-icon icon="experiment" flip="horizontal" />
|
||||
<iconify-icon icon="experiment" :horizontal-flip="true" />
|
||||
<iconify-icon icon="experiment" :h-flip="true" />
|
||||
<Icon icon="experiment" :hFlip="true" />
|
||||
<Icon icon="experiment" flip="horizontal" />
|
||||
<Icon icon="experiment" :horizontal-flip="true" />
|
||||
<Icon icon="experiment" :h-flip="true" />
|
||||
</div>
|
||||
<div>
|
||||
Flip vertically:
|
||||
<iconify-icon icon="experiment" :vFlip="true" />
|
||||
<iconify-icon icon="experiment" flip="vertical" />
|
||||
<iconify-icon icon="experiment" :vertical-flip="true" />
|
||||
<iconify-icon icon="experiment" :v-flip="true" />
|
||||
<Icon icon="experiment" :vFlip="true" />
|
||||
<Icon icon="experiment" flip="vertical" />
|
||||
<Icon icon="experiment" :vertical-flip="true" />
|
||||
<Icon icon="experiment" :v-flip="true" />
|
||||
</div>
|
||||
<div>
|
||||
Flip horizontally and vertically:
|
||||
<iconify-icon icon="experiment" :hFlip="true" :vFlip="true" />
|
||||
<iconify-icon icon="experiment" flip="horizontal,vertical" />
|
||||
<iconify-icon
|
||||
<Icon icon="experiment" :hFlip="true" :vFlip="true" />
|
||||
<Icon icon="experiment" flip="horizontal,vertical" />
|
||||
<Icon
|
||||
icon="experiment"
|
||||
:horizontal-flip="true"
|
||||
:vertical-flip="true"
|
||||
/>
|
||||
<iconify-icon icon="experiment" :h-flip="true" :v-flip="true" />
|
||||
<Icon icon="experiment" :h-flip="true" :v-flip="true" />
|
||||
</div>
|
||||
<div>
|
||||
90° rotation:
|
||||
<iconify-icon icon="experiment" :rotate="1" />
|
||||
<iconify-icon icon="experiment" rotate="90deg" />
|
||||
<iconify-icon icon="experiment" rotate="25%" />
|
||||
<Icon icon="experiment" :rotate="1" />
|
||||
<Icon icon="experiment" rotate="90deg" />
|
||||
<Icon icon="experiment" rotate="25%" />
|
||||
</div>
|
||||
<div>
|
||||
180° rotation:
|
||||
<iconify-icon icon="experiment" :rotate="2" />
|
||||
<iconify-icon icon="experiment" rotate="180deg" />
|
||||
<iconify-icon icon="experiment" rotate="50%" />
|
||||
<Icon icon="experiment" :rotate="2" />
|
||||
<Icon icon="experiment" rotate="180deg" />
|
||||
<Icon icon="experiment" rotate="50%" />
|
||||
</div>
|
||||
<div>
|
||||
270° rotation:
|
||||
<iconify-icon icon="experiment" :rotate="3" />
|
||||
<iconify-icon icon="experiment" rotate="270deg" />
|
||||
<iconify-icon icon="experiment" rotate="-25%" />
|
||||
<Icon icon="experiment" :rotate="3" />
|
||||
<Icon icon="experiment" rotate="270deg" />
|
||||
<Icon icon="experiment" rotate="-25%" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
|
||||
export default Vue.extend({
|
||||
export default {
|
||||
components: {
|
||||
IconifyIcon,
|
||||
Icon,
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -3,57 +3,53 @@
|
||||
<h1>Vue attributes (components/VueAttributes.vue)</h1>
|
||||
<div>
|
||||
Icon with color (red):
|
||||
<iconify-icon :icon="icon" color="red" :inline="true" />
|
||||
<InlineIcon :icon="icon" color="red" />
|
||||
</div>
|
||||
<div>
|
||||
Icon size (2em):
|
||||
<IconifyIcon icon="admin-users" height="2em" />
|
||||
<Icon icon="admin-users" height="2em" />
|
||||
</div>
|
||||
<div>
|
||||
Icon style as string (red):
|
||||
<IconifyIcon icon="admin-users" style="color: red;" />
|
||||
<Icon icon="admin-users" style="color: red;" />
|
||||
</div>
|
||||
<div>
|
||||
Inline icon with vertical-align style as string (aligned to top):
|
||||
<IconifyIcon
|
||||
<Icon
|
||||
icon="admin-users"
|
||||
style="vertical-align: .25em;"
|
||||
style="vertical-align: 0.25em;"
|
||||
:inline="true"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
Inline icon with bound style as object (purple, 2em, no alignment):
|
||||
<IconifyIcon
|
||||
<InlineIcon
|
||||
icon="admin-users"
|
||||
v-bind:style="icon1StyleObj"
|
||||
:inline="true"
|
||||
color="green"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
Inline icon with bound style as string (purple, 2em, no alignment):
|
||||
<IconifyIcon
|
||||
<InlineIcon
|
||||
icon="admin-users"
|
||||
v-bind:style="icon1StyleStr"
|
||||
:inline="true"
|
||||
color="green"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
Combined styles (green, 2em, shadow):
|
||||
<IconifyIcon
|
||||
<InlineIcon
|
||||
icon="admin-users"
|
||||
v-bind:style="[boxShadowStyleObj, fontSizeStyleObj2]"
|
||||
:inline="true"
|
||||
color="green"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
Dynamic style (red / green, shadow):
|
||||
<IconifyIcon
|
||||
<InlineIcon
|
||||
icon="admin-users"
|
||||
v-bind:style="[boxShadowStyleObj, dynamicStyleObj]"
|
||||
:inline="true"
|
||||
v-on:click="
|
||||
dynamicStyleObj.color =
|
||||
dynamicStyleObj.color === 'red' ? 'green' : 'red'
|
||||
@ -62,18 +58,17 @@
|
||||
</div>
|
||||
<div>
|
||||
Dynamic style (shadow / color):
|
||||
<IconifyIcon
|
||||
<InlineIcon
|
||||
icon="admin-users"
|
||||
v-bind:style="[
|
||||
showShadow ? boxShadowStyleObj : dynamicStyleObj,
|
||||
]"
|
||||
:inline="true"
|
||||
v-on:click="showShadow = !showShadow"
|
||||
/> (click it!)
|
||||
</div>
|
||||
<div>
|
||||
Reference:
|
||||
<IconifyIcon
|
||||
<Icon
|
||||
icon="admin-users"
|
||||
ref="icon1"
|
||||
@click="logReference"
|
||||
@ -83,15 +78,15 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import { Icon, InlineIcon, addIcon } from '@iconify/vue';
|
||||
import adminUsers from '@iconify-icons/dashicons/admin-users';
|
||||
|
||||
IconifyIcon.addIcon('admin-users', adminUsers);
|
||||
addIcon('admin-users', adminUsers);
|
||||
|
||||
export default Vue.extend({
|
||||
export default {
|
||||
components: {
|
||||
IconifyIcon,
|
||||
Icon,
|
||||
InlineIcon,
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
@ -124,9 +119,9 @@ export default Vue.extend({
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
logReference: function() {
|
||||
logReference: function () {
|
||||
console.log('References:', this.$refs);
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<iconify-icon icon="customizer" height="20" :style="{ color: 'purple' }" />
|
||||
<Icon icon="customizer" height="20" :style="{ color: 'purple' }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import { Icon, addIcon } from '@iconify/vue';
|
||||
import adminCustomizer from '@iconify-icons/dashicons/admin-customizer';
|
||||
|
||||
IconifyIcon.addIcon('customizer', adminCustomizer);
|
||||
addIcon('customizer', adminCustomizer);
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconifyIcon,
|
||||
Icon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,17 +1,16 @@
|
||||
<template>
|
||||
<iconify-icon icon="customizer" height="20" :style="{ color: 'blue' }" />
|
||||
<Icon icon="customizer" height="20" :style="{ color: 'blue' }" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import { Icon, addIcon } from '@iconify/vue';
|
||||
import adminCustomizer from '@iconify-icons/dashicons/admin-customizer';
|
||||
|
||||
IconifyIcon.addIcon('customizer', adminCustomizer);
|
||||
addIcon('customizer', adminCustomizer);
|
||||
|
||||
export default Vue.extend({
|
||||
export default {
|
||||
components: {
|
||||
IconifyIcon,
|
||||
Icon,
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<iconify-icon :icon="icons.chart" height="20" :style="{ color: 'green' }" />
|
||||
<Icon :icon="icons.chart" height="20" :style="{ color: 'green' }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import adminCustomizer from '@iconify-icons/dashicons/admin-customizer';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconifyIcon,
|
||||
Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
<template>
|
||||
<iconify-icon :icon="icons.chart" height="20" :style="{ color: 'red' }" />
|
||||
<Icon :icon="icons.chart" height="20" :style="{ color: 'red' }" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import adminCustomizer from '@iconify-icons/dashicons/admin-customizer';
|
||||
|
||||
export default Vue.extend({
|
||||
export default {
|
||||
components: {
|
||||
IconifyIcon,
|
||||
Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -18,5 +17,5 @@ export default Vue.extend({
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
56
packages/vue-demo/src/index.css
Normal file
56
packages/vue-demo/src/index.css
Normal file
@ -0,0 +1,56 @@
|
||||
#app {
|
||||
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;
|
||||
}
|
||||
section {
|
||||
border-bottom: 1px dotted #ccc;
|
||||
padding: 16px;
|
||||
}
|
||||
section:last-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
section:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
h1 {
|
||||
margin: 0 0 16px;
|
||||
padding: 0;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
p {
|
||||
margin: 12px 0 4px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 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 svg {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
font-size: 24px;
|
||||
line-height: 1em;
|
||||
margin: -0.5em 0 0;
|
||||
}
|
||||
5
packages/vue-demo/src/main.js
Normal file
5
packages/vue-demo/src/main.js
Normal file
@ -0,0 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import './index.css'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
@ -1,39 +1,14 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"module": "esnext",
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"importHelpers": true,
|
||||
"moduleResolution": "node",
|
||||
"experimentalDecorators": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"sourceMap": true,
|
||||
"baseUrl": ".",
|
||||
"types": [
|
||||
"webpack-env"
|
||||
],
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.vue",
|
||||
"tests/**/*.ts",
|
||||
"tests/**/*.tsx"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
"compilerOptions": {
|
||||
"rootDir": "./lib",
|
||||
"outDir": "./src",
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
"declaration": false,
|
||||
"sourceMap": false,
|
||||
"strict": false,
|
||||
"moduleResolution": "node",
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
}
|
||||
}
|
||||
|
||||
3
packages/vue-demo/vite.config.js
Normal file
3
packages/vue-demo/vite.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
// optimizeDeps: { include: ['@iconify/core/lib/misc/merge'] },
|
||||
};
|
||||
@ -1,6 +1,6 @@
|
||||
# Iconify for Vue 2
|
||||
# Iconify for Vue
|
||||
|
||||
Iconify for Vue 2 is not yet another icon component! There are many of them already.
|
||||
Iconify for Vue is not yet another icon component! There are many of them already.
|
||||
|
||||
Iconify is the most versatile icon framework.
|
||||
|
||||
@ -37,12 +37,20 @@ yarn add --dev @iconify/vue
|
||||
|
||||
This package does not include icons. Icons are split into separate packages that available at NPM. See below.
|
||||
|
||||
### Vue 2 compatibility
|
||||
|
||||
This component is not backwards compatible with Vue 2.
|
||||
|
||||
If you are using Vue 2, you need to install version 1.0 of Iconify component.
|
||||
|
||||
See [Vue 2 component](https://github.com/iconify/iconify/tree/master/archive/vue2) for details.
|
||||
|
||||
## Usage
|
||||
|
||||
Install `@iconify/vue` and packages for selected icon sets. Import component from `@iconify/vue` and icon data for the icon you want to use:
|
||||
|
||||
```js
|
||||
import IconifyIcon from '@iconify/vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import home from '@iconify-icons/mdi/home';
|
||||
import faceWithMonocle from '@iconify-icons/twemoji/face-with-monocle';
|
||||
```
|
||||
|
||||
1964
packages/vue/package-lock.json
generated
1964
packages/vue/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -2,7 +2,7 @@
|
||||
"name": "@iconify/vue",
|
||||
"description": "Iconify icon component for Vue.",
|
||||
"author": "Vjacheslav Trushkin",
|
||||
"version": "1.0.3",
|
||||
"version": "2.0.0-beta.0",
|
||||
"license": "MIT",
|
||||
"bugs": "https://github.com/iconify/iconify/issues",
|
||||
"homepage": "https://iconify.design/",
|
||||
@ -23,9 +23,8 @@
|
||||
"module": "dist/IconifyIcon.esm.js",
|
||||
"types": "dist/IconifyIcon.d.ts",
|
||||
"peerDependencies": {
|
||||
"vue": "^2.0.0"
|
||||
"vue": "^3.0.0"
|
||||
},
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"@iconify/core": "^1.0.0-beta.4",
|
||||
"@iconify/types": "^1.0.3",
|
||||
@ -33,17 +32,15 @@
|
||||
"@rollup/plugin-buble": "^0.21.3",
|
||||
"@rollup/plugin-commonjs": "^11.1.0",
|
||||
"@rollup/plugin-node-resolve": "^7.1.3",
|
||||
"@types/jest": "^24.0.19",
|
||||
"@vue/test-utils": "^1.0.4",
|
||||
"@types/jest": "^24.9.1",
|
||||
"@vue/test-utils": "^2.0.0-beta.2",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-jest": "^25.5.1",
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"jest": "^25.5.4",
|
||||
"rollup": "^2.26.5",
|
||||
"rollup-plugin-terser": "^7.0.0",
|
||||
"typescript": "^3.9.7",
|
||||
"vue": "^2.6.12",
|
||||
"vue-jest": "^3.0.6",
|
||||
"vue-template-compiler": "^2.6.12"
|
||||
"vue": "^3.0.0-rc.7",
|
||||
"vue-jest": "^5.0.0-alpha.3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,21 +1,9 @@
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import buble from '@rollup/plugin-buble';
|
||||
// import { terser } from 'rollup-plugin-terser';
|
||||
|
||||
const name = 'IconifyIcon';
|
||||
|
||||
// Module footer
|
||||
const footer = `
|
||||
// Export as ES module
|
||||
if (typeof exports === 'object') {
|
||||
try {
|
||||
exports.__esModule = true;
|
||||
exports.default = ${name};
|
||||
} catch (err) {
|
||||
}
|
||||
}`;
|
||||
|
||||
// Export configuration
|
||||
const config = [
|
||||
// ES Module
|
||||
@ -43,36 +31,6 @@ const config = [
|
||||
],
|
||||
plugins: [resolve(), commonjs(), buble()],
|
||||
},
|
||||
/*
|
||||
// Web and module
|
||||
// "unpkg": "dist/IconifyIcon.min.js",
|
||||
|
||||
{
|
||||
input: `lib/${name}.js`,
|
||||
output: [
|
||||
{
|
||||
file: `dist/${name}.js`,
|
||||
name,
|
||||
format: 'iife',
|
||||
footer,
|
||||
},
|
||||
],
|
||||
plugins: [resolve(), commonjs(), buble()],
|
||||
},
|
||||
// Web
|
||||
{
|
||||
input: `lib/${name}.js`,
|
||||
output: [
|
||||
{
|
||||
file: `dist/${name}.min.js`,
|
||||
name,
|
||||
exports: 'named',
|
||||
format: 'iife',
|
||||
},
|
||||
],
|
||||
plugins: [resolve(), commonjs(), buble(), terser()],
|
||||
},
|
||||
*/
|
||||
];
|
||||
|
||||
export default config;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import _Vue, { PluginFunction, VueConstructor, VNode, VNodeData } from 'vue';
|
||||
import { FunctionalRenderContext } from 'vue/src/core';
|
||||
import { h, VNode } from 'vue';
|
||||
|
||||
import { IconifyIcon as IconifyIconData } from '@iconify/types';
|
||||
import {
|
||||
@ -23,7 +22,7 @@ import { merge } from '@iconify/core/lib/misc/merge';
|
||||
/**
|
||||
* Export types that could be used in component
|
||||
*/
|
||||
export {
|
||||
export type {
|
||||
IconifyIconData,
|
||||
IconifyHorizontalIconAlignment,
|
||||
IconifyVerticalIconAlignment,
|
||||
@ -60,15 +59,6 @@ export interface IconifyIconProps extends IconifyIconCustomisations {
|
||||
verticalFlip?: boolean;
|
||||
}
|
||||
|
||||
// Interface for functional component context that is missing in Vue types.
|
||||
// Missing some unused stuff: children, slots, scopedSlots, injections
|
||||
// interface FunctionalRenderContext {
|
||||
// props: { [key: string]: unknown };
|
||||
// data?: VNodeData;
|
||||
// parent?: VNode;
|
||||
// listeners?: object; // alias of data.on
|
||||
// }
|
||||
|
||||
/**
|
||||
* Default SVG attributes
|
||||
*/
|
||||
@ -84,12 +74,20 @@ const svgDefaults = {
|
||||
* Aliases for customisations.
|
||||
* In Vue 'v-' properties are reserved, so v-align and v-flip must be renamed
|
||||
*/
|
||||
const customisationAliases = {
|
||||
horizontalAlign: 'hAlign',
|
||||
verticalAlign: 'vAlign',
|
||||
horizontalFlip: 'hFlip',
|
||||
verticalFlip: 'vFlip',
|
||||
};
|
||||
let customisationAliases = {};
|
||||
['horizontal', 'vertical'].forEach((prefix) => {
|
||||
['Align', 'Flip'].forEach((suffix) => {
|
||||
const attr = prefix.slice(0, 1) + suffix;
|
||||
// vertical-align
|
||||
customisationAliases[prefix + '-' + suffix.toLowerCase()] = attr;
|
||||
// v-align
|
||||
customisationAliases[
|
||||
prefix.slice(0, 1) + '-' + suffix.toLowerCase()
|
||||
] = attr;
|
||||
// verticalAlign
|
||||
customisationAliases[prefix + suffix] = attr;
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Storage for icons referred by name
|
||||
@ -97,222 +95,204 @@ const customisationAliases = {
|
||||
const storage: Record<string, Required<IconifyIconData>> = Object.create(null);
|
||||
|
||||
/**
|
||||
* Interface for style variable
|
||||
* Interface for inline style
|
||||
*/
|
||||
type VNodeStyle = (string | Record<string, unknown>)[];
|
||||
type VStyleObject = Record<string, unknown>;
|
||||
interface VStyleAsString {
|
||||
type: 'string';
|
||||
style: string;
|
||||
}
|
||||
interface VStyleAsArray {
|
||||
type: 'array';
|
||||
style: VStyleObject[];
|
||||
}
|
||||
type VStyle = VStyleAsString | VStyleAsArray;
|
||||
|
||||
/**
|
||||
* TypeScript guard, never used
|
||||
*/
|
||||
function assertNever(value: never) {
|
||||
// Do nothing
|
||||
}
|
||||
|
||||
/**
|
||||
* IconifyIcon component
|
||||
*/
|
||||
const IconifyIcon = {
|
||||
name: 'IconifyIcon',
|
||||
functional: true,
|
||||
const IconifyIcon = (
|
||||
inline: boolean,
|
||||
props: Record<string, unknown>,
|
||||
context
|
||||
): VNode => {
|
||||
const attribs = (props as unknown) as IconifyIconProps;
|
||||
|
||||
/**
|
||||
* Render icon
|
||||
*
|
||||
* @param createElement
|
||||
* @param context
|
||||
*/
|
||||
render(
|
||||
createElement: typeof _Vue.prototype.$createElement,
|
||||
context: FunctionalRenderContext
|
||||
): VNode {
|
||||
const props = context.props;
|
||||
// Split properties
|
||||
const icon =
|
||||
typeof attribs.icon === 'string'
|
||||
? storage[attribs.icon]
|
||||
: fullIcon(attribs.icon);
|
||||
if (!icon) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Split properties
|
||||
const icon =
|
||||
typeof props.icon === 'string'
|
||||
? storage[props.icon]
|
||||
: fullIcon(props.icon);
|
||||
if (!icon) {
|
||||
return null;
|
||||
}
|
||||
const customisations = merge(
|
||||
defaults,
|
||||
{ inline },
|
||||
props as IconifyIconCustomisations
|
||||
) as FullIconCustomisations;
|
||||
const componentProps = merge(svgDefaults);
|
||||
|
||||
const customisations = merge(
|
||||
defaults,
|
||||
props as IconifyIconCustomisations
|
||||
) as FullIconCustomisations;
|
||||
const componentProps = merge(svgDefaults);
|
||||
// Copy style
|
||||
let style: VStyle;
|
||||
let hasStyle = true;
|
||||
if (typeof props.style === 'string') {
|
||||
// String: copy it
|
||||
style = {
|
||||
type: 'string',
|
||||
style: props.style,
|
||||
};
|
||||
} else if (
|
||||
typeof props.style === 'object' &&
|
||||
props.style instanceof Array
|
||||
) {
|
||||
// Array of objects
|
||||
style = {
|
||||
type: 'array',
|
||||
style: props.style.slice(0),
|
||||
};
|
||||
} else if (typeof props.style === 'object' && props.style !== null) {
|
||||
// Object
|
||||
style = {
|
||||
type: 'array',
|
||||
style: [props.style as VStyleObject],
|
||||
};
|
||||
} else {
|
||||
// No style
|
||||
style = {
|
||||
type: 'string',
|
||||
style: '',
|
||||
};
|
||||
hasStyle = false;
|
||||
}
|
||||
|
||||
// Copy style
|
||||
let stylesList: VNodeStyle;
|
||||
let styleString: string;
|
||||
let isStyleString = false;
|
||||
let hasStyle = true;
|
||||
// Get element properties
|
||||
let styleType: typeof style.type;
|
||||
for (let key in props) {
|
||||
const value = props[key];
|
||||
switch (key) {
|
||||
// Properties to ignore
|
||||
case 'icon':
|
||||
case 'style':
|
||||
break;
|
||||
|
||||
function setStyle(value: unknown): boolean {
|
||||
if (typeof value === 'string') {
|
||||
// Style as string
|
||||
styleString = value;
|
||||
isStyleString = true;
|
||||
return true;
|
||||
}
|
||||
if (typeof value !== 'object') {
|
||||
// Unknown type ???
|
||||
return false;
|
||||
}
|
||||
|
||||
stylesList = value instanceof Array ? value.slice(0) : [value];
|
||||
return true;
|
||||
}
|
||||
|
||||
const contextData = context.data;
|
||||
if (
|
||||
!contextData ||
|
||||
(!setStyle(contextData.staticStyle) && !setStyle(contextData.style))
|
||||
) {
|
||||
stylesList = [];
|
||||
hasStyle = false;
|
||||
}
|
||||
|
||||
// Get element properties
|
||||
for (let key in props) {
|
||||
const value = props[key];
|
||||
switch (key) {
|
||||
// Properties to ignore
|
||||
case 'icon':
|
||||
case 'style':
|
||||
break;
|
||||
|
||||
// Flip as string: 'horizontal,vertical'
|
||||
case 'flip':
|
||||
// Flip as string: 'horizontal,vertical'
|
||||
case 'flip':
|
||||
if (typeof value === 'string') {
|
||||
flipFromString(customisations, value);
|
||||
break;
|
||||
}
|
||||
break;
|
||||
|
||||
// Alignment as string
|
||||
case 'align':
|
||||
// Alignment as string
|
||||
case 'align':
|
||||
if (typeof value === 'string') {
|
||||
alignmentFromString(customisations, value);
|
||||
break;
|
||||
}
|
||||
break;
|
||||
|
||||
// Color: copy to style
|
||||
case 'color':
|
||||
if (isStyleString) {
|
||||
styleString = 'color: ' + value + '; ' + styleString;
|
||||
} else {
|
||||
stylesList.unshift({
|
||||
// Color: copy to style
|
||||
case 'color':
|
||||
styleType = style.type;
|
||||
switch (styleType) {
|
||||
case 'string':
|
||||
(style as VStyleAsString).style =
|
||||
'color: ' + value + '; ' + style.style;
|
||||
hasStyle = true;
|
||||
break;
|
||||
|
||||
case 'array':
|
||||
(style as VStyleAsArray).style.unshift({
|
||||
color: value,
|
||||
});
|
||||
}
|
||||
hasStyle = true;
|
||||
break;
|
||||
break;
|
||||
|
||||
// Rotation as string
|
||||
case 'rotate':
|
||||
if (typeof value !== 'number') {
|
||||
customisations[key] = rotateFromString(value);
|
||||
} else {
|
||||
componentProps[key] = value;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
assertNever(styleType);
|
||||
}
|
||||
break;
|
||||
|
||||
// Remove aria-hidden
|
||||
case 'ariaHidden':
|
||||
case 'aria-hidden':
|
||||
// Vue transforms 'aria-hidden' property to 'ariaHidden'
|
||||
if (value !== true && value !== 'true') {
|
||||
delete componentProps['aria-hidden'];
|
||||
}
|
||||
break;
|
||||
// Rotation as string
|
||||
case 'rotate':
|
||||
if (typeof value === 'string') {
|
||||
customisations[key] = rotateFromString(value);
|
||||
} else if (typeof value === 'number') {
|
||||
componentProps[key] = value;
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
if (customisationAliases[key] !== void 0) {
|
||||
// Aliases for customisations
|
||||
customisations[customisationAliases[key]] = value;
|
||||
} else if (defaults[key] === void 0) {
|
||||
// Copy missing property if it does not exist in customisations
|
||||
componentProps[key] = value;
|
||||
}
|
||||
}
|
||||
// Remove aria-hidden
|
||||
case 'ariaHidden':
|
||||
case 'aria-hidden':
|
||||
// Vue transforms 'aria-hidden' property to 'ariaHidden'
|
||||
if (value !== true && value !== 'true') {
|
||||
delete componentProps['aria-hidden'];
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
if (customisationAliases[key] !== void 0) {
|
||||
// Aliases for customisations
|
||||
customisations[customisationAliases[key]] = value;
|
||||
} else if (defaults[key] === void 0) {
|
||||
// Copy missing property if it does not exist in customisations
|
||||
componentProps[key] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Generate icon
|
||||
const item = iconToSVG(icon, customisations);
|
||||
// Generate icon
|
||||
const item = iconToSVG(icon, customisations);
|
||||
|
||||
// Add icon stuff
|
||||
for (let key in item.attributes) {
|
||||
componentProps[key] = item.attributes[key];
|
||||
}
|
||||
// Add icon stuff
|
||||
for (let key in item.attributes) {
|
||||
componentProps[key] = item.attributes[key];
|
||||
}
|
||||
|
||||
if (item.inline) {
|
||||
if (isStyleString) {
|
||||
styleString = 'vertical-align: -0.125em; ' + styleString;
|
||||
} else {
|
||||
stylesList.unshift({
|
||||
if (item.inline) {
|
||||
styleType = style.type;
|
||||
switch (styleType) {
|
||||
case 'string':
|
||||
(style as VStyleAsString).style =
|
||||
'vertical-align: -0.125em; ' + style.style;
|
||||
hasStyle = true;
|
||||
break;
|
||||
|
||||
case 'array':
|
||||
(style as VStyleAsArray).style.unshift({
|
||||
verticalAlign: '-0.125em',
|
||||
});
|
||||
}
|
||||
hasStyle = true;
|
||||
break;
|
||||
|
||||
default:
|
||||
assertNever(styleType);
|
||||
}
|
||||
}
|
||||
|
||||
// Generate node data
|
||||
const data: VNodeData = {
|
||||
attrs: componentProps,
|
||||
domProps: {
|
||||
innerHTML: replaceIDs(item.body),
|
||||
},
|
||||
};
|
||||
if (hasStyle) {
|
||||
data.style = isStyleString ? styleString : stylesList;
|
||||
}
|
||||
// Add innerHTML and style to props
|
||||
componentProps['innerHTML'] = replaceIDs(item.body);
|
||||
if (hasStyle) {
|
||||
componentProps['style'] = style.style;
|
||||
}
|
||||
|
||||
if (contextData) {
|
||||
['on', 'ref'].forEach((attr) => {
|
||||
if (contextData[attr] !== void 0) {
|
||||
data[attr] = contextData[attr];
|
||||
}
|
||||
});
|
||||
['staticClass', 'class'].forEach((attr) => {
|
||||
if (contextData[attr] !== void 0) {
|
||||
data.class = contextData[attr];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return createElement('svg', data);
|
||||
},
|
||||
|
||||
/**
|
||||
* Add icon to storage that can later be used by name, for example: <iconify-icon icon="home" />
|
||||
*/
|
||||
addIcon: (name: string, data: IconifyIconData) => {
|
||||
storage[name] = fullIcon(data);
|
||||
},
|
||||
// Render icon
|
||||
return h('svg', componentProps);
|
||||
};
|
||||
|
||||
// Install function
|
||||
interface InstallFunction extends PluginFunction<unknown> {
|
||||
installed?: boolean;
|
||||
}
|
||||
interface InstallableComponent extends VueConstructor<_Vue> {
|
||||
install: InstallFunction;
|
||||
}
|
||||
|
||||
const install: InstallFunction = function installIconifyIcon(Vue: typeof _Vue) {
|
||||
if (install.installed) return;
|
||||
install.installed = true;
|
||||
Vue.component('IconifyIcon', IconifyIcon);
|
||||
};
|
||||
|
||||
// Create module definition for Vue.use()
|
||||
const plugin = {
|
||||
install,
|
||||
};
|
||||
|
||||
// Auto-install when vue is found (eg. in browser via <script> tag)
|
||||
let GlobalVue = null;
|
||||
if (typeof window !== 'undefined') {
|
||||
GlobalVue = window.Vue;
|
||||
} else if (typeof global !== 'undefined') {
|
||||
GlobalVue = ((global as unknown) as Record<string, unknown>).Vue;
|
||||
}
|
||||
if (GlobalVue) {
|
||||
GlobalVue.use(plugin);
|
||||
}
|
||||
|
||||
// Inject install function into component - allows component
|
||||
// to be registered via Vue.use() as well as Vue.component()
|
||||
((IconifyIcon as unknown) as InstallableComponent).install = install;
|
||||
|
||||
// Export component
|
||||
export default IconifyIcon;
|
||||
export const Icon = IconifyIcon.bind(null, false);
|
||||
export const InlineIcon = IconifyIcon.bind(null, true);
|
||||
|
||||
/**
|
||||
* Add icon to storage
|
||||
*/
|
||||
export function addIcon(name: string, data: IconifyIconData) {
|
||||
storage[name] = fullIcon(data);
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { mount } from '@vue/test-utils';
|
||||
import IconifyIcon from '../';
|
||||
import { Icon, addIcon } from '../';
|
||||
|
||||
const iconData = {
|
||||
body:
|
||||
@ -15,29 +15,30 @@ const iconDataWithID = {
|
||||
height: 128,
|
||||
};
|
||||
|
||||
// Spacing for HTML matches
|
||||
const spacing = (count) => {
|
||||
return '\n' + ' '.repeat(count);
|
||||
};
|
||||
/*
|
||||
|
||||
Note: findComponent() tests are temporarily disabled because it is bugged in current version of test-utils
|
||||
|
||||
*/
|
||||
|
||||
describe('Mounting component', () => {
|
||||
test('with wrapper', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon />`,
|
||||
components: { Icon },
|
||||
template: `<Icon />`,
|
||||
};
|
||||
|
||||
const wrapper = mount(Wrapper, {});
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
});
|
||||
|
||||
test('without wrapper', () => {
|
||||
const wrapper = mount(IconifyIcon, {});
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const wrapper = mount(Icon, {});
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"></svg>'
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"></svg>'
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -45,8 +46,8 @@ describe('Mounting component', () => {
|
||||
describe('Rendering icon', () => {
|
||||
test('as object', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' />`,
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
@ -55,24 +56,22 @@ describe('Rendering icon', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
spacing(1) +
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path>' +
|
||||
spacing(0) +
|
||||
'</svg>'
|
||||
);
|
||||
});
|
||||
|
||||
test('as string', () => {
|
||||
const iconName = 'test-string';
|
||||
IconifyIcon.addIcon(iconName, iconData);
|
||||
addIcon(iconName, iconData);
|
||||
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' />`,
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconName,
|
||||
@ -81,21 +80,19 @@ describe('Rendering icon', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
spacing(1) +
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path>' +
|
||||
spacing(0) +
|
||||
'</svg>'
|
||||
);
|
||||
});
|
||||
|
||||
test('replacing id', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' />`,
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconDataWithID,
|
||||
@ -104,7 +101,7 @@ describe('Rendering icon', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).not.toMatch('id="ssvg-id-1st-place-medala"');
|
||||
});
|
||||
@ -113,8 +110,8 @@ describe('Rendering icon', () => {
|
||||
describe('Passing attributes', () => {
|
||||
test('title', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' title='Icon!' />`,
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' title='Icon!' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
@ -123,21 +120,19 @@ describe('Passing attributes', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" title="Icon!" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
spacing(1) +
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" title="Icon!" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path>' +
|
||||
spacing(0) +
|
||||
'</svg>'
|
||||
);
|
||||
});
|
||||
|
||||
test('aria-hidden', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :aria-hidden='false' />`,
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' :aria-hidden='false' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
@ -146,21 +141,19 @@ describe('Passing attributes', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
spacing(1) +
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path>' +
|
||||
spacing(0) +
|
||||
'</svg>'
|
||||
);
|
||||
});
|
||||
|
||||
test('ariaHidden', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :ariaHidden='false' />`,
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' :ariaHidden='false' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
@ -169,21 +162,19 @@ describe('Passing attributes', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
spacing(1) +
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path>' +
|
||||
spacing(0) +
|
||||
'</svg>'
|
||||
);
|
||||
});
|
||||
|
||||
test('attributes that cannot change', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' viewBox='0 0 0 0' preserveAspectRatio='none' />`,
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' viewBox='0 0 0 0' preserveAspectRatio='none' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
@ -192,14 +183,12 @@ describe('Passing attributes', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
// same values, but different order
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" width="1em" height="1em">' +
|
||||
spacing(1) +
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" width="1em" height="1em">' +
|
||||
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path>' +
|
||||
spacing(0) +
|
||||
'</svg>'
|
||||
);
|
||||
});
|
||||
@ -208,8 +197,8 @@ describe('Passing attributes', () => {
|
||||
describe('Dimensions', () => {
|
||||
test('height', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :height='height' />`,
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' :height='height' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
@ -219,21 +208,19 @@ describe('Dimensions', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
spacing(1) +
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path>' +
|
||||
spacing(0) +
|
||||
'</svg>'
|
||||
);
|
||||
});
|
||||
|
||||
test('width and height', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :width='width' :height='height' />`,
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' :width='width' :height='height' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
@ -244,21 +231,19 @@ describe('Dimensions', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="32" height="48" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
spacing(1) +
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="32" height="48" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path>' +
|
||||
spacing(0) +
|
||||
'</svg>'
|
||||
);
|
||||
});
|
||||
|
||||
test('auto', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :height='height' />`,
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' :height='height' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
@ -268,13 +253,11 @@ describe('Dimensions', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toStrictEqual(
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
spacing(1) +
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">' +
|
||||
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path>' +
|
||||
spacing(0) +
|
||||
'</svg>'
|
||||
);
|
||||
});
|
||||
@ -283,8 +266,8 @@ describe('Dimensions', () => {
|
||||
describe('Rotation', () => {
|
||||
test('number', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :rotate='rotate' />`,
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' :rotate='rotate' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
@ -294,15 +277,15 @@ describe('Rotation', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('rotate(90 ');
|
||||
});
|
||||
|
||||
test('string', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' rotate='270deg' />`,
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' rotate='270deg' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
@ -311,7 +294,7 @@ describe('Rotation', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('rotate(-90 ');
|
||||
});
|
||||
@ -320,8 +303,8 @@ describe('Rotation', () => {
|
||||
describe('Flip', () => {
|
||||
test('boolean', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :horizontalFlip='horizontalFlip' />`,
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' :horizontalFlip='horizontalFlip' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
@ -331,15 +314,15 @@ describe('Flip', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('scale(-1 1)');
|
||||
});
|
||||
|
||||
test('string', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' flip='vertical' />`,
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' flip='vertical' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
@ -348,15 +331,15 @@ describe('Flip', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('scale(1 -1)');
|
||||
});
|
||||
|
||||
test('string and boolean', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' flip='horizontal' :verticalFlip='true' />`,
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' flip='horizontal' :verticalFlip='true' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
@ -365,7 +348,7 @@ describe('Flip', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
// horizontal + vertical = 180deg rotation
|
||||
expect(item.html()).toMatch('rotate(180 ');
|
||||
@ -373,8 +356,8 @@ describe('Flip', () => {
|
||||
|
||||
test('string for boolean attribute', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' horizontalFlip='true' />`,
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' horizontalFlip='true' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
@ -383,7 +366,7 @@ describe('Flip', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('scale(-1 1)');
|
||||
});
|
||||
@ -391,8 +374,8 @@ describe('Flip', () => {
|
||||
test('shorthand and boolean', () => {
|
||||
// 'flip' is processed after 'hFlip', overwriting value
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' flip='horizontal' :hFlip='false' />`,
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' flip='horizontal' :hFlip='false' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
@ -401,15 +384,15 @@ describe('Flip', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('scale(-1 1)');
|
||||
});
|
||||
|
||||
test('shorthand and boolean as string', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' flip='vertical' horizontalFlip='true' />`,
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' flip='vertical' horizontalFlip='true' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
@ -418,7 +401,7 @@ describe('Flip', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
// horizontal + vertical = 180deg rotation
|
||||
expect(item.html()).toMatch('rotate(180 ');
|
||||
@ -426,8 +409,8 @@ describe('Flip', () => {
|
||||
|
||||
test('wrong case', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' :verticalflip='verticalflip' :horizontalflip='true' />`,
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' :verticalflip='verticalflip' :horizontalflip='true' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
@ -437,7 +420,7 @@ describe('Flip', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).not.toMatch('scale(');
|
||||
expect(item.html()).not.toMatch('rotate(');
|
||||
@ -447,8 +430,8 @@ describe('Flip', () => {
|
||||
describe('Alignment and slice', () => {
|
||||
test('vAlign and slice', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' vAlign='top' :slice='true' />`,
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' vAlign='top' :slice='true' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
@ -457,15 +440,15 @@ describe('Alignment and slice', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('preserveAspectRatio="xMidYMin slice"');
|
||||
});
|
||||
|
||||
test('string', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' align='left bottom' />`,
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' align='left bottom' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
@ -474,15 +457,15 @@ describe('Alignment and slice', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('preserveAspectRatio="xMinYMax meet"');
|
||||
});
|
||||
|
||||
test('Alignment aliases', () => {
|
||||
const Wrapper = {
|
||||
components: { IconifyIcon },
|
||||
template: `<iconify-icon :icon='icon' verticalAlign='top' horizontalAlign='right' />`,
|
||||
components: { Icon },
|
||||
template: `<Icon :icon='icon' verticalAlign='top' horizontalAlign='right' />`,
|
||||
data() {
|
||||
return {
|
||||
icon: iconData,
|
||||
@ -491,7 +474,7 @@ describe('Alignment and slice', () => {
|
||||
};
|
||||
const wrapper = mount(Wrapper, {});
|
||||
|
||||
const item = wrapper.findComponent(IconifyIcon);
|
||||
const item = wrapper; //.findComponent(Icon);
|
||||
expect(item.exists()).toBe(true);
|
||||
expect(item.html()).toMatch('preserveAspectRatio="xMaxYMin meet"');
|
||||
});
|
||||
|
||||
@ -2,13 +2,14 @@
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"outDir": "./lib",
|
||||
"target": "ES2019",
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
"declaration": true,
|
||||
"sourceMap": false,
|
||||
"strict": false,
|
||||
"moduleResolution": "node",
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noLib": false
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user