agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2025-02-14 09:30:21 +00:00
Code Issues Releases Activity

Generate consistent ids on server and client in Vue and Svelte components

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2021-02-15 10:31:05 +02:00
parent a461428d6a
commit cfebb972a6
7 changed files with 87 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/react/src/icon.ts
View File

@ -184,10 +184,11 @@ const component = (
// Generate icon
const item = iconToSVG(icon, customisations);
// Add icon stuff
// Counter for ids based on "id" property to render icons consistently on server and client
let localCounter = 0;
const id = props.id;
// Add icon stuff
componentProps.dangerouslySetInnerHTML = {
__html: replaceIDs(
item.body,

13
packages/svelte-demo/src/App.svelte
View File

@ -10,6 +10,14 @@
import AlignmentDemo from './components/Alignment.svelte';
import TransformationsDemo from './components/Transformations.svelte';
import StyleDemo from './components/Style.svelte';
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,
};
</script>
<style>
@ -97,4 +105,9 @@
<AlignmentDemo />
<TransformationsDemo />
<StyleDemo />
<section>
<h1>Tests</h1>
<p>Testing replacing ids in icon: <Icon icon={iconDataWithID} /> <Icon icon={iconDataWithID} /> (default handler) <Icon icon={iconDataWithID} id="test" /> <Icon icon={iconDataWithID} id="test2" /> (custom handler)</p>
</section>
</main>

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.3",
"version": "1.0.4",
"license": "MIT",
"bugs": "https://github.com/iconify/iconify/issues",
"homepage": "https://github.com/iconify/iconify",

9
packages/svelte/src/generate-icon.js
View File

@ -103,9 +103,16 @@ export function generateIcon(props) {
componentProps.style = style;
}
// Counter for ids based on "id" property to render icons consistently on server and client
let localCounter = 0;
const id = props.id;
// Generate HTML
return {
attributes: componentProps,
body: replaceIDs(item.body),
body: replaceIDs(
item.body,
id ? () => id + '-' + localCounter++ : 'iconify-svelte-'
),
};
}

2
packages/vue/package.json
View File

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

9
packages/vue/src/IconifyIcon.ts
View File

@ -277,8 +277,15 @@ const IconifyIcon = (
}
}
// Counter for ids based on "id" property to render icons consistently on server and client
let localCounter = 0;
const id = props.id;
// Add innerHTML and style to props
componentProps['innerHTML'] = replaceIDs(item.body);
componentProps['innerHTML'] = replaceIDs(
item.body,
id ? () => id + '-' + localCounter++ : 'iconify-vue-'
);
if (hasStyle) {
componentProps['style'] = style.style;
}

55
packages/vue/tests/icon.test.js
View File

@ -157,7 +157,7 @@ describe('Rendering icon', () => {
);
});
test('replacing id', () => {
test('replacing id (default behavior)', () => {
const Wrapper = {
components: { Icon },
template: `<Icon :icon='icon' />`,
@ -173,6 +173,59 @@ describe('Rendering icon', () => {
expect(item.exists()).toBe(true);
expect(item.html()).not.toMatch('id="ssvg-id-1st-place-medala"');
});
test('replacing id (custom generator)', () => {
const Wrapper = {
components: { Icon },
template: `<Icon :icon='icon' id='test' />`,
data() {
return {
icon: iconDataWithID,
};
},
};
const wrapper = mount(Wrapper, {});
const item = wrapper; //.findComponent(Icon);
let html = item.html();
// Generate expected body
let expected =
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" id="test" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 128 128">' +
iconDataWithID.body +
'</svg>';
const replacements = {
'ssvg-id-1st-place-medala': 'test-0',
'ssvg-id-1st-place-medald': 'test-1',
'ssvg-id-1st-place-medalf': 'test-2',
'ssvg-id-1st-place-medalh': 'test-3',
'ssvg-id-1st-place-medalj': 'test-4',
'ssvg-id-1st-place-medalm': 'test-5',
'ssvg-id-1st-place-medalp': 'test-6',
'ssvg-id-1st-place-medalb': 'test-7',
'ssvg-id-1st-place-medalk': 'test-8',
'ssvg-id-1st-place-medalo': 'test-9',
'ssvg-id-1st-place-medalc': 'test-10',
'ssvg-id-1st-place-medale': 'test-11',
'ssvg-id-1st-place-medalg': 'test-12',
'ssvg-id-1st-place-medali': 'test-13',
'ssvg-id-1st-place-medall': 'test-14',
'ssvg-id-1st-place-medaln': 'test-15',
};
Object.keys(replacements).forEach((search) => {
expected = expected.replace(
new RegExp(search, 'g'),
replacements[search]
);
});
['path', 'stop', 'use', 'circle'].forEach((tag) => {
// Replace <path ...></path> with <path />
html = html.replace(new RegExp('></' + tag, 'g'), '/');
});
expect(html).toStrictEqual(expected);
});
});
describe('Passing attributes', () => {