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

Fix rendering icons that have customisations

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2020-04-29 11:15:37 +03:00
parent 8639d52586
commit 3a7b1751b3
9 changed files with 103 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/package.json
View File

@ -2,7 +2,7 @@
"name": "@iconify/core",
"description": "Reusable files used by multiple Iconify packages",
"author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)",
"version": "1.0.0-beta.0",
"version": "1.0.0-beta.1",
"license": "(Apache-2.0 OR GPL-2.0)",
"bugs": "https://github.com/iconify/iconify/issues",
"homepage": "https://iconify.design/",

10
packages/core/src/builder/index.ts
View File

@ -86,10 +86,12 @@ export function iconToSVG(
// Apply transformations
const transformations: string[] = [];
let rotation = customisations.rotate;
const hFlip = customisations.hFlip !== icon.hFlip;
const vFlip = customisations.vFlip !== icon.vFlip;
let rotation = customisations.rotate + icon.rotate;
if (customisations.hFlip) {
if (customisations.vFlip) {
if (hFlip) {
if (vFlip) {
rotation += 2;
} else {
// Horizontal flip
@ -103,7 +105,7 @@ export function iconToSVG(
transformations.push('scale(-1 1)');
box.top = box.left = 0;
}
} else if (customisations.vFlip) {
} else if (vFlip) {
// Vertical flip
transformations.push(
'translate(' + (0 - box.left) + ' ' + (box.height + box.top) + ')'

56
packages/core/tests/10-basic/storage-test.ts
View File

@ -400,4 +400,60 @@ describe('Testing storage', () => {
};
expect(getIcon(storage, 'alias2z3')).to.be.eql(expected);
});
it('Icon set with aliases that use transformations', () => {
const storage = newStorage('arty-animated');
const iconBody =
'<g stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-rule="evenodd"><path d="M40 64l48-48" class="animation-delay-0 animation-duration-10 animate-stroke stroke-length-102"/><path d="M40 64l48 48" class="animation-delay-0 animation-duration-10 animate-stroke stroke-length-102"/></g>';
expect(
addIconSet(storage, {
prefix: 'arty-animated',
icons: {
'16-chevron-left': {
body: iconBody,
},
},
aliases: {
'16-chevron-right': {
parent: '16-chevron-left',
hFlip: true,
},
},
width: 128,
height: 128,
})
).to.be.equal(true);
expect(Object.keys(storage.icons)).to.be.eql([
'16-chevron-left',
'16-chevron-right',
]);
// Test icon
let expected: FullIconifyIcon = {
body: iconBody,
width: 128,
height: 128,
top: 0,
left: 0,
hFlip: false,
vFlip: false,
rotate: 0,
};
expect(getIcon(storage, '16-chevron-left')).to.be.eql(expected);
// Test alias
expected = {
body: iconBody,
width: 128,
height: 128,
top: 0,
left: 0,
hFlip: true,
vFlip: false,
rotate: 0,
};
expect(getIcon(storage, '16-chevron-right')).to.be.eql(expected);
});
});

28
packages/core/tests/20-builder/icon-to-svg-test.ts
View File

@ -200,4 +200,32 @@ describe('Testing iconToSVG', () => {
const result = iconToSVG(icon, custom);
expect(result).to.be.eql(expected);
});
it('Flip with real icon', () => {
const iconBody =
'<g stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" fill="none" fill-rule="evenodd"><path d="M40 64l48-48" class="animation-delay-0 animation-duration-10 animate-stroke stroke-length-102"/><path d="M40 64l48 48" class="animation-delay-0 animation-duration-10 animate-stroke stroke-length-102"/></g>';
const custom: FullIconCustomisations = fullCustomisations({});
const icon: FullIconifyIcon = fullIcon({
body: iconBody,
width: 128,
height: 128,
hFlip: true,
});
const expected: IconifyIconBuildResult = {
attributes: {
width: '1em',
height: '1em',
preserveAspectRatio: 'xMidYMid meet',
viewBox: '0 0 128 128',
},
body:
'<g transform="translate(128 0) scale(-1 1)">' +
iconBody +
'</g>',
};
const result = iconToSVG(icon, custom);
expect(result).to.be.eql(expected);
});
});

8
packages/iconify/README.md
View File

@ -21,7 +21,13 @@ Iconify SVG framework is designed to be as easy to use as possible.
Add this line to your page to load Iconify SVG framework (you can add it to `<head>` section of page or before `</body>`):
```html
<script src="https://code.iconify.design/2/2.0.0-beta1/iconify.min.js"></script>
<script src="https://code.iconify.design/2/2.0.0-beta.2/iconify.min.js"></script>
```
or
```html
<script src="https://cdn.jsdelivr.net/npm/@iconify/iconify@2.0.0-beta.2/dist/iconify.min.js"></script>
```
or, if you are building a project with something like WebPack or Rollup, you can include the script by installing `@iconify/iconify` as a dependency and importing it in your project:

4
packages/iconify/package.json
View File

@ -1,8 +1,8 @@
{
"name": "@iconify/iconify",
"description": "Iconify common modules, used in multiple packages",
"description": "Unified SVG framework with over 50,000 icons to choose from",
"author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)",
"version": "2.0.0-beta.1",
"version": "2.0.0-beta.2",
"license": "(Apache-2.0 OR GPL-2.0)",
"main": "./dist/iconify.min.js",
"types": "./dist/iconify.d.ts",

2
packages/react/package.json
View File

@ -2,7 +2,7 @@
"name": "@iconify/react",
"description": "Iconify icon component for React.",
"author": "Vjacheslav Trushkin",
"version": "2.0.0-beta.0",
"version": "2.0.0-beta.1",
"license": "MIT",
"bugs": "https://github.com/iconify/iconify/issues",
"homepage": "https://iconify.design/",

2
packages/svelte/package.json
View File

@ -2,7 +2,7 @@
"name": "@iconify/svelte",
"description": "Iconify icon component for Svelte.",
"author": "Vjacheslav Trushkin",
"version": "1.0.0-beta.0",
"version": "1.0.0-beta.1",
"license": "MIT",
"bugs": "https://github.com/iconify/iconify/issues",
"homepage": "https://github.com/iconify/iconify",

2
packages/vue/package.json
View File

@ -2,7 +2,7 @@
"name": "@iconify/vue",
"description": "Iconify icon component for Vue.",
"author": "Vjacheslav Trushkin",
"version": "1.0.0",
"version": "1.0.1",
"license": "MIT",
"bugs": "https://github.com/iconify/iconify/issues",
"homepage": "https://iconify.design/",