agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-12-12 21:57:50 +00:00
Code Issues Releases Activity

Update Vue 3 component for new core structure

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2021-09-27 16:58:47 +03:00
parent 1f203e2914
commit e77de11118
34 changed files with 9304 additions and 36846 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/vue/.babelrc
View File

@ -1,8 +1,3 @@
{
"presets": [["env", { "modules": false }]],
"env": {
"test": {
"presets": [["env", { "targets": { "node": "current" } }]]
}
}
"presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
}

3
packages/vue/api-extractor.iconify.json
View File

@ -5,7 +5,8 @@
"@iconify/types",
"@iconify/core",
"@iconify/utils",
"@cyberalien/redundancy"
"@cyberalien/redundancy",
"@iconify/api-redundancy"
],
"compiler": {},
"apiReport": {

37
packages/vue/api-extractor.offline.json
View File

@ -1,44 +1,9 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
"extends": "./api-extractor.iconify.json",
"mainEntryPointFilePath": "lib/offline.d.ts",
"bundledPackages": [
"@iconify/types",
"@iconify/core",
"@iconify/utils",
"@cyberalien/redundancy"
],
"compiler": {},
"apiReport": {
"enabled": false
},
"docModel": {
"enabled": false
},
"dtsRollup": {
"enabled": true,
"untrimmedFilePath": "<projectFolder>/dist/offline.d.ts"
},
"tsdocMetadata": {
"enabled": false
},
"messages": {
"compilerMessageReporting": {
"default": {
"logLevel": "warning"
}
},
"extractorMessageReporting": {
"default": {
"logLevel": "warning"
},
"ae-missing-release-tag": {
"logLevel": "none"
}
},
"tsdocMessageReporting": {
"default": {
"logLevel": "warning"
}
}
}
}

3
packages/vue/build.js
View File

@ -1,3 +1,4 @@
/* eslint-disable */
const fs = require('fs');
const path = require('path');
const child_process = require('child_process');
@ -64,7 +65,7 @@ if (compile.api && !fileExists(packagesDir + '/vue/lib/IconifyIcon.d.ts')) {
compile.lib = true;
}
if (compile.lib && !fileExists(packagesDir + '/core/lib/modules.js')) {
if (compile.lib && !fileExists(packagesDir + '/core/lib/cache.js')) {
compile.core = true;
}

5
packages/vue/jest.config.js
View File

@ -1,7 +1,8 @@
module.exports = {
preset: '@vue/cli-plugin-unit-jest',
moduleFileExtensions: ['js', 'json', 'vue'],
transform: {
'^.+\\.vue$': 'vue-jest',
'^.+\\.js$': 'babel-jest',
'^.+\\.vue$': '@vue/vue3-jest',
},
testMatch: ['**/tests/**/*.test.js'],
};

14
packages/vue/offline/package.json Normal file
View File

@ -0,0 +1,14 @@
{
"name": "@iconify/vue/offline",
"module": "../dist/offline.mjs",
"main": "../dist/offline.js",
"types": "../dist/offline.d.ts",
"exports": {
"./*": "./*",
".": {
"import": "../dist/offline.mjs",
"types": "../dist/offline.d.ts",
"default": "../dist/offline.js"
}
}
}

5
packages/vue/offline/readme.md Normal file
View File

@ -0,0 +1,5 @@
# @iconify/react/offline
This sub-directory contains `package.json` with entry points for importing `@iconify/react/offline`.
There is a duplicate entry in `exports` section of `package.json` in the parent directory, but at moment of coding this, TypeScript does not support conditional exports properly, so this directory is used as a duplicate to make everything work with TypeScript.

45619
packages/vue/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

37
packages/vue/package.json
View File

@ -18,30 +18,37 @@
"build:dist": "rollup -c rollup.config.js",
"prebuild:api": "api-extractor run --local --verbose --config api-extractor.offline.json",
"build:api": "api-extractor run --local --verbose --config api-extractor.iconify.json",
"pretest": "npm run build",
"test": "jest"
},
"main": "dist/iconify.js",
"module": "dist/iconify.mjs",
"types": "dist/iconify.d.ts",
"exports": {
"./*": "./*",
".": {
"import": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
},
"./offline": {
"import": "./dist/offline.mjs",
"types": "./dist/offline.d.ts",
"default": "./dist/offline.js"
}
},
"devDependencies": {
"@iconify/core": "^1.2.0-beta.2",
"@iconify/types": "^1.0.6",
"@iconify/utils": "^1.0.7",
"@babel/preset-env": "^7.15.6",
"@iconify/core": "^1.2.0-beta.3",
"@microsoft/api-extractor": "^7.15.2",
"@rollup/plugin-commonjs": "^19.0.0",
"@rollup/plugin-node-resolve": "^13.0.0",
"@types/jest": "^26.0.15",
"@vue/cli-plugin-unit-jest": "^4.5.13",
"@types/jest": "^27.0.2",
"@vue/test-utils": "^2.0.0-rc.6",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.3",
"babel-preset-env": "^1.7.0",
"jest": "^24.9.0",
"rollup": "^2.33.3",
"typescript": "^4.1.2",
"vue": "3",
"vue-jest": "^5.0.0-alpha.9"
"@vue/vue3-jest": "^27.0.0-alpha.1",
"babel-jest": "^27.2.2",
"jest": "^27.2.2",
"rollup": "^2.57.0",
"typescript": "^4.4.3",
"vue": "3"
},
"peerDependencies": {
"vue": "^3.0.0"

5
packages/vue/rollup.config.js
View File

@ -1,5 +1,4 @@
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
const names = ['offline', 'iconify'];
const component = 'Icon';
@ -19,7 +18,7 @@ names.forEach(name => {
},
],
external: ['vue'],
plugins: [resolve(), commonjs()],
plugins: [resolve()],
});
// UMD module
@ -37,7 +36,7 @@ names.forEach(name => {
},
],
external: ['vue'],
plugins: [resolve(), commonjs()],
plugins: [resolve()],
});
});

172
packages/vue/src/iconify.ts
View File

@ -1,5 +1,5 @@
import { defineComponent } from 'vue';
import {
import type {
DefineComponent,
ComponentOptionsMixin,
EmitsOptions,
@ -8,72 +8,77 @@ import {
ComponentCustomProps,
} from 'vue';
import { IconifyJSON } from '@iconify/types';
import type { IconifyJSON, IconifyIcon } from '@iconify/types';
// Core
import { IconifyIconName, stringToIcon } from '@iconify/utils/lib/icon/name';
import {
import type { IconifyIconName } from '@iconify/utils/lib/icon/name';
import { stringToIcon } from '@iconify/utils/lib/icon/name';
import type {
IconifyIconSize,
IconifyHorizontalIconAlignment,
IconifyVerticalIconAlignment,
} from '@iconify/utils/lib/customisations';
import type { IconifyStorageFunctions } from '@iconify/core/lib/storage/functions';
import {
IconifyStorageFunctions,
storageFunctions,
iconExists,
getIcon,
addIcon,
addCollection,
getIconData,
allowSimpleNames,
} from '@iconify/core/lib/storage/functions';
import {
IconifyBuilderFunctions,
builderFunctions,
} from '@iconify/core/lib/builder/functions';
import { IconifyIconBuildResult } from '@iconify/utils/lib/svg/build';
import { fullIcon, IconifyIcon } from '@iconify/utils/lib/icon';
import { listIcons } from '@iconify/core/lib/storage/storage';
import type { IconifyBuilderFunctions } from '@iconify/core/lib/builder/functions';
import { buildIcon } from '@iconify/core/lib/builder/functions';
import { replaceIDs } from '@iconify/utils/lib/svg/id';
import { calculateSize } from '@iconify/utils/lib/svg/size';
import type { IconifyIconBuildResult } from '@iconify/utils/lib/svg/build';
import { fullIcon } from '@iconify/utils/lib/icon';
// API
import {
import type {
IconifyAPIFunctions,
IconifyAPIInternalFunctions,
APIFunctions,
APIInternalFunctions,
IconifyAPIQueryParams,
IconifyAPICustomQueryParams,
IconifyAPIMergeQueryParams,
} from '@iconify/core/lib/api/functions';
import {
setAPIModule,
import type {
IconifyAPIModule,
IconifyAPISendQuery,
IconifyAPIPrepareIconsQuery,
} from '@iconify/core/lib/api/modules';
import { jsonpAPIModule } from '@iconify/core/lib/api/modules/jsonp';
import {
fetchAPIModule,
getFetch,
setFetch,
} from '@iconify/core/lib/api/modules/fetch';
import {
setAPIConfig,
import { setAPIModule } from '@iconify/core/lib/api/modules';
import type {
PartialIconifyAPIConfig,
IconifyAPIConfig,
GetAPIConfig,
} from '@iconify/core/lib/api/config';
import {
addAPIProvider,
getAPIConfig,
listAPIProviders,
} from '@iconify/core/lib/api/config';
import { fetchAPIModule, setFetch } from '@iconify/core/lib/api/modules/fetch';
import type {
IconifyIconLoaderCallback,
IconifyIconLoaderAbort,
} from '@iconify/core/lib/api/icons';
import { loadIcons } from '@iconify/core/lib/api/icons';
import { sendAPIQuery } from '@iconify/core/lib/api/query';
import { mergeParams } from '@iconify/core/lib/api/params';
// Cache
import { cache } from '@iconify/core/lib/cache';
import { storeCache, loadCache } from '@iconify/core/lib/browser-storage';
import { toggleBrowserCache } from '@iconify/core/lib/browser-storage/functions';
import {
import type {
IconifyBrowserCacheType,
IconifyBrowserCacheFunctions,
} from '@iconify/core/lib/browser-storage/functions';
// Properties
import {
import type {
RawIconCustomisations,
IconifyIconOnLoad,
IconProps,
@ -132,71 +137,18 @@ export { RawIconCustomisations, IconifyIconBuildResult };
export { IconifyBrowserCacheType };
/**
* Enable and disable browser cache
* Enable cache
*/
export const enableCache = (storage: IconifyBrowserCacheType) =>
function enableCache(storage: IconifyBrowserCacheType): void {
toggleBrowserCache(storage, true);
}
export const disableCache = (storage: IconifyBrowserCacheType) =>
/**
* Disable cache
*/
function disableCache(storage: IconifyBrowserCacheType): void {
toggleBrowserCache(storage, false);
/* Storage functions */
/**
* Check if icon exists
*/
export const iconExists = storageFunctions.iconExists;
/**
* Get icon data
*/
export const getIcon = storageFunctions.getIcon;
/**
* List available icons
*/
export const listIcons = storageFunctions.listIcons;
/**
* Add one icon
*/
export const addIcon = storageFunctions.addIcon;
/**
* Add icon set
*/
export const addCollection = storageFunctions.addCollection;
/* Builder functions */
/**
* Calculate icon size
*/
export const calculateSize = builderFunctions.calculateSize;
/**
* Replace unique ids in content
*/
export const replaceIDs = builderFunctions.replaceIDs;
/**
* Build SVG
*/
export const buildIcon = builderFunctions.buildIcon;
/* API functions */
/**
* Load icons
*/
export const loadIcons = APIFunctions.loadIcons;
/**
* Add API provider
*/
export const addAPIProvider = APIFunctions.addAPIProvider;
/**
* Export internal functions that can be used by third party implementations
*/
export const _api = APIInternalFunctions;
}
/**
* Initialise stuff
@ -205,15 +157,7 @@ export const _api = APIInternalFunctions;
allowSimpleNames(true);
// Set API module
setAPIModule('', getFetch() ? fetchAPIModule : jsonpAPIModule);
/**
* Function to enable node-fetch for getting icons on server side
*/
_api.setFetch = (nodeFetch: typeof fetch) => {
setFetch(nodeFetch);
setAPIModule('', fetchAPIModule);
};
setAPIModule('', fetchAPIModule);
/**
* Browser stuff
@ -234,7 +178,7 @@ if (typeof document !== 'undefined' && typeof window !== 'undefined') {
const preload = _window.IconifyPreload;
const err = 'Invalid IconifyPreload syntax.';
if (typeof preload === 'object' && preload !== null) {
(preload instanceof Array ? preload : [preload]).forEach(item => {
(preload instanceof Array ? preload : [preload]).forEach((item) => {
try {
if (
// Check if item is an object and not null/array
@ -271,7 +215,7 @@ if (typeof document !== 'undefined' && typeof window !== 'undefined') {
) {
continue;
}
if (!setAPIConfig(key, value)) {
if (!addAPIProvider(key, value)) {
console.error(err);
}
} catch (e) {
@ -433,3 +377,33 @@ export const Icon = defineComponent({
return render(icon.data, newProps);
},
});
/**
* Internal API
*/
const _api: IconifyAPIInternalFunctions = {
getAPIConfig,
setAPIModule,
sendAPIQuery,
setFetch,
listAPIProviders,
mergeParams,
};
/**
* Export functions
*/
// IconifyAPIInternalFunctions
export { _api };
// IconifyAPIFunctions
export { addAPIProvider, loadIcons };
// IconifyStorageFunctions
export { iconExists, getIcon, listIcons, addIcon, addCollection };
// IconifyBuilderFunctions
export { replaceIDs, calculateSize, buildIcon };
// IconifyBrowserCacheFunctions
export { enableCache, disableCache };

8
packages/vue/src/offline.ts
View File

@ -1,5 +1,5 @@
import { defineComponent } from 'vue';
import {
import type {
VNode,
DefineComponent,
ComponentOptionsMixin,
@ -8,15 +8,15 @@ import {
AllowedComponentProps,
ComponentCustomProps,
} from 'vue';
import { IconifyIcon, IconifyJSON } from '@iconify/types';
import {
import type { IconifyIcon, IconifyJSON } from '@iconify/types';
import type {
IconifyHorizontalIconAlignment,
IconifyVerticalIconAlignment,
IconifyIconSize,
} from '@iconify/utils/lib/customisations';
import { fullIcon } from '@iconify/utils/lib/icon';
import { parseIconSet } from '@iconify/utils/lib/icon-set/parse';
import {
import type {
IconifyIconCustomisations,
IconifyIconProps,
IconProps,

4
packages/vue/src/props.ts
View File

@ -1,5 +1,5 @@
import { IconifyIcon } from '@iconify/types';
import { IconifyIconCustomisations as RawIconCustomisations } from '@iconify/utils/lib/customisations';
import type { IconifyIcon } from '@iconify/types';
import type { IconifyIconCustomisations as RawIconCustomisations } from '@iconify/utils/lib/customisations';
export { RawIconCustomisations };

18
packages/vue/src/render.ts
View File

@ -1,7 +1,8 @@
import { h, VNode } from 'vue';
import { IconifyIcon } from '@iconify/types';
import { h } from 'vue';
import type { VNode } from 'vue';
import type { IconifyIcon } from '@iconify/types';
import type { FullIconCustomisations } from '@iconify/utils/lib/customisations';
import {
FullIconCustomisations,
defaults,
mergeCustomisations,
} from '@iconify/utils/lib/customisations';
@ -12,7 +13,7 @@ import {
import { rotateFromString } from '@iconify/utils/lib/customisations/rotate';
import { iconToSVG } from '@iconify/utils/lib/svg/build';
import { replaceIDs } from '@iconify/utils/lib/svg/id';
import { IconifyIconCustomisations, IconProps } from './props';
import type { IconifyIconCustomisations, IconProps } from './props';
/**
* Default SVG attributes
@ -29,8 +30,8 @@ const svgDefaults: Record<string, unknown> = {
* In Vue 'v-' properties are reserved, so v-align and v-flip must be renamed
*/
let customisationAliases = {};
['horizontal', 'vertical'].forEach(prefix => {
['Align', 'Flip'].forEach(suffix => {
['horizontal', 'vertical'].forEach((prefix) => {
['Align', 'Flip'].forEach((suffix) => {
const attr = prefix.slice(0, 1) + suffix;
const value = {
attr,
@ -40,9 +41,8 @@ let customisationAliases = {};
// vertical-align
customisationAliases[prefix + '-' + suffix.toLowerCase()] = value;
// v-align
customisationAliases[
prefix.slice(0, 1) + '-' + suffix.toLowerCase()
] = value;
customisationAliases[prefix.slice(0, 1) + '-' + suffix.toLowerCase()] =
value;
// verticalAlign
customisationAliases[prefix + suffix] = value;
});

7
packages/vue/tests/api/10-api-mock.test.js
View File

@ -1,9 +1,12 @@
import { loadIcons, iconExists } from '../../dist/iconify';
/**
* @jest-environment jsdom
*/
import { loadIcons, iconExists } from '../../';
import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
import { provider, nextPrefix } from './load';
describe('Testing fake API', () => {
test('using fake API to load icon', done => {
test('using fake API to load icon', (done) => {
const prefix = nextPrefix();
const name = 'mock-test';
const iconName = `@${provider}:${prefix}:${name}`;

18
packages/vue/tests/api/20-rendering-from-api.test.js
View File

@ -1,17 +1,19 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon, loadIcons, iconExists } from '../../dist/iconify';
import { Icon, loadIcons, iconExists } from '../../';
import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
import { provider, nextPrefix } from './load';
const iconData = {
body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24,
height: 24,
};
describe('Rendering icon', () => {
test('rendering icon after loading it', done => {
test('rendering icon after loading it', (done) => {
const prefix = nextPrefix();
const name = 'render-test';
const iconName = `@${provider}:${prefix}:${name}`;
@ -77,7 +79,7 @@ describe('Rendering icon', () => {
});
});
test('rendering icon before loading it', done => {
test('rendering icon before loading it', (done) => {
const prefix = nextPrefix();
const name = 'mock-test';
const iconName = `@${provider}:${prefix}:${name}`;
@ -94,7 +96,7 @@ describe('Rendering icon', () => {
[name]: iconData,
},
},
delay: next => {
delay: (next) => {
// Icon should not have loaded yet
expect(iconExists(iconName)).toEqual(false);
@ -160,7 +162,7 @@ describe('Rendering icon', () => {
expect(onLoadCalled).toEqual(false);
});
test('missing icon', done => {
test('missing icon', (done) => {
const prefix = nextPrefix();
const name = 'missing-icon';
const iconName = `@${provider}:${prefix}:${name}`;
@ -169,7 +171,7 @@ describe('Rendering icon', () => {
provider,
prefix,
response: 404,
delay: next => {
delay: (next) => {
// Icon should not have loaded yet
expect(iconExists(iconName)).toEqual(false);

29
packages/vue/tests/api/30-changing-props.test.js
View File

@ -1,24 +1,25 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon, iconExists } from '../../dist/iconify';
import { Icon, iconExists } from '../../';
import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
import { provider, nextPrefix } from './load';
const iconData = {
body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24,
height: 24,
};
const iconData2 = {
body:
'<path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"/>',
body: '<path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"/>',
width: 32,
height: 32,
};
describe('Rendering icon', () => {
test('changing icon property', done => {
test('changing icon property', (done) => {
const prefix = nextPrefix();
const name = 'changing-prop';
const name2 = 'changing-prop2';
@ -27,7 +28,7 @@ describe('Rendering icon', () => {
const className = `iconify iconify--${prefix} iconify--${provider}`;
let onLoadCalled = ''; // Name of icon from last onLoad call
const onLoad = name => {
const onLoad = (name) => {
// onLoad should be called only once per icon
switch (name) {
// First onLoad call
@ -56,7 +57,7 @@ describe('Rendering icon', () => {
[name]: iconData,
},
},
delay: next => {
delay: (next) => {
// Icon should not have loaded yet
expect(iconExists(iconName)).toEqual(false);
@ -100,7 +101,7 @@ describe('Rendering icon', () => {
[name2]: iconData2,
},
},
delay: next => {
delay: (next) => {
// Icon should not have loaded yet
expect(iconExists(iconName2)).toEqual(false);
@ -152,7 +153,7 @@ describe('Rendering icon', () => {
expect(onLoadCalled).toEqual('');
});
test('changing icon property while loading', done => {
test('changing icon property while loading', (done) => {
const prefix = nextPrefix();
const name = 'changing-prop';
const name2 = 'changing-prop2';
@ -171,7 +172,7 @@ describe('Rendering icon', () => {
[name]: iconData,
},
},
delay: next => {
delay: (next) => {
// Should have been called asynchronously, which means icon name has changed
expect(isSync).toEqual(false);
@ -190,7 +191,7 @@ describe('Rendering icon', () => {
[name2]: iconData2,
},
},
delay: next => {
delay: (next) => {
// Should have been called asynchronously
expect(isSync).toEqual(false);
@ -242,7 +243,7 @@ describe('Rendering icon', () => {
isSync = false;
});
test('changing multiple properties', done => {
test('changing multiple properties', (done) => {
const prefix = nextPrefix();
const name = 'multiple-props';
const iconName = `@${provider}:${prefix}:${name}`;
@ -258,7 +259,7 @@ describe('Rendering icon', () => {
[name]: iconData,
},
},
delay: next => {
delay: (next) => {
// Icon should not have loaded yet
expect(iconExists(iconName)).toEqual(false);

2
packages/vue/tests/api/load.js
View File

@ -1,4 +1,4 @@
import { _api, addAPIProvider } from '../../dist/iconify';
import { _api, addAPIProvider } from '../../';
import { mockAPIModule } from '@iconify/core/lib/api/modules/mock';
// API provider for tests

8
packages/vue/tests/iconify/10-basic.test.js
View File

@ -1,9 +1,11 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/iconify';
import { Icon } from '../../';
const iconData = {
body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24,
height: 24,
};

13
packages/vue/tests/iconify/10-empty.test.js
View File

@ -1,5 +1,8 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/iconify';
import { Icon } from '../../';
describe('Empty icon', () => {
test('basic test', () => {
@ -7,7 +10,7 @@ describe('Empty icon', () => {
props: {},
});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual('<!---->');
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe('<!---->');
});
test('with child node', () => {
@ -17,7 +20,7 @@ describe('Empty icon', () => {
};
const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<i class="fa fa-home"></i>'
);
});
@ -29,7 +32,7 @@ describe('Empty icon', () => {
};
const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual('icon');
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe('icon');
});
test('with multiple childen', () => {
@ -39,7 +42,7 @@ describe('Empty icon', () => {
};
const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<i class="fa fa-home"></i> Home icon'
);
});

8
packages/vue/tests/iconify/20-attributes.test.js
View File

@ -1,9 +1,11 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/iconify';
import { Icon } from '../../';
const iconData = {
body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24,
height: 24,
};

8
packages/vue/tests/iconify/20-dimensions.test.js
View File

@ -1,9 +1,11 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/iconify';
import { Icon } from '../../';
const iconData = {
body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24,
height: 24,
};

8
packages/vue/tests/iconify/20-ids.test.js
View File

@ -1,9 +1,11 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/iconify';
import { Icon } from '../../';
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>',
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,
};

8
packages/vue/tests/iconify/20-inline.test.js
View File

@ -1,9 +1,11 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/iconify';
import { Icon } from '../../';
const iconData = {
body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24,
height: 24,
};

10
packages/vue/tests/iconify/20-transformations.test.js
View File

@ -1,9 +1,11 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/iconify';
import { Icon } from '../../';
const iconData = {
body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24,
height: 24,
};
@ -21,7 +23,7 @@ describe('Rotation', () => {
};
const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<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"><g transform="rotate(90 12 12)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>'
);
});

11
packages/vue/tests/offline/10-basic.test.js
View File

@ -1,9 +1,12 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
// Import from file
import { Icon } from '../../dist/offline';
const iconData = {
body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24,
height: 24,
};
@ -21,7 +24,7 @@ describe('Creating component', () => {
};
const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<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"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
);
});
@ -33,7 +36,7 @@ describe('Creating component', () => {
},
});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<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"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
);
});

14
packages/vue/tests/offline/10-empty.test.js
View File

@ -1,5 +1,9 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/offline';
// Import from alias
import { Icon } from '../../offline';
describe('Empty icon', () => {
test('basic test', () => {
@ -7,7 +11,7 @@ describe('Empty icon', () => {
props: {},
});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual('<!---->');
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe('<!---->');
});
test('with child node', () => {
@ -17,7 +21,7 @@ describe('Empty icon', () => {
};
const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<i class="fa fa-home"></i>'
);
});
@ -29,7 +33,7 @@ describe('Empty icon', () => {
};
const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual('icon');
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe('icon');
});
test('with multiple childen', () => {
@ -39,7 +43,7 @@ describe('Empty icon', () => {
};
const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<i class="fa fa-home"></i> Home icon'
);
});

8
packages/vue/tests/offline/20-attributes.test.js
View File

@ -1,9 +1,11 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/offline';
import { Icon } from '../../offline';
const iconData = {
body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24,
height: 24,
};

8
packages/vue/tests/offline/20-dimensions.test.js
View File

@ -1,9 +1,11 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/offline';
import { Icon } from '../../offline';
const iconData = {
body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24,
height: 24,
};

8
packages/vue/tests/offline/20-ids.test.js
View File

@ -1,9 +1,11 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/offline';
import { Icon } from '../../offline';
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>',
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,
};

6
packages/vue/tests/offline/20-inline.test.js
View File

@ -1,9 +1,11 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/offline';
const iconData = {
body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24,
height: 24,
};

28
packages/vue/tests/offline/20-storage.test.js
View File

@ -1,9 +1,11 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon, addIcon, addCollection } from '../../dist/offline';
import { Icon, addIcon, addCollection } from '../../offline';
const iconData = {
body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24,
height: 24,
};
@ -18,7 +20,7 @@ describe('Using storage', () => {
};
const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<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"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
);
});
@ -28,12 +30,10 @@ describe('Using storage', () => {
prefix: 'mdi-light',
icons: {
account: {
body:
'<path d="M11.5 14c4.142 0 7.5 1.567 7.5 3.5V20H4v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5zM11.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5z" fill="currentColor"/>',
body: '<path d="M11.5 14c4.142 0 7.5 1.567 7.5 3.5V20H4v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5zM11.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5z" fill="currentColor"/>',
},
home: {
body:
'<path d="M16 8.414l-4.5-4.5L4.414 11H6v8h3v-6h5v6h3v-8h1.586L17 9.414V6h-1v2.414zM2 12l9.5-9.5L15 6V5h3v4l3 3h-3v7.998h-5v-6h-3v6H5V12H2z" fill="currentColor"/>',
body: '<path d="M16 8.414l-4.5-4.5L4.414 11H6v8h3v-6h5v6h3v-8h1.586L17 9.414V6h-1v2.414zM2 12l9.5-9.5L15 6V5h3v4l3 3h-3v7.998h-5v-6h-3v6H5V12H2z" fill="currentColor"/>',
},
},
width: 24,
@ -53,7 +53,7 @@ describe('Using storage', () => {
};
const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<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"><path d="M11.5 14c4.142 0 7.5 1.567 7.5 3.5V20H4v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5zM11.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5z" fill="currentColor"></path></svg>'
);
});
@ -63,12 +63,10 @@ describe('Using storage', () => {
prefix: 'mdi-light',
icons: {
'account-alert': {
body:
'<path d="M10.5 14c4.142 0 7.5 1.567 7.5 3.5V20H3v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S4 16.12 4 17.5V19h13v-1.5zM10.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM20 16v-1h1v1h-1zm0-3V7h1v6h-1z" fill="currentColor"/>',
body: '<path d="M10.5 14c4.142 0 7.5 1.567 7.5 3.5V20H3v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S4 16.12 4 17.5V19h13v-1.5zM10.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM20 16v-1h1v1h-1zm0-3V7h1v6h-1z" fill="currentColor"/>',
},
'link': {
body:
'<path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"/>',
body: '<path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"/>',
},
},
width: 24,
@ -83,7 +81,7 @@ describe('Using storage', () => {
};
const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<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"><path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"></path></svg>'
);
});
@ -95,6 +93,6 @@ describe('Using storage', () => {
};
const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual('<!---->');
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe('<!---->');
});
});

10
packages/vue/tests/offline/20-transformations.test.js
View File

@ -1,9 +1,11 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/offline';
import { Icon } from '../../offline';
const iconData = {
body:
'<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24,
height: 24,
};
@ -21,7 +23,7 @@ describe('Rotation', () => {
};
const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(
'<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"><g transform="rotate(90 12 12)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>'
);
});

1
packages/vue/tsconfig.json
View File

@ -9,6 +9,7 @@
"strict": false,
"moduleResolution": "node",
"esModuleInterop": true,
"importsNotUsedAsValues": "error",
"forceConsistentCasingInFileNames": true
}
}