mirror of
https://github.com/iconify/iconify.git
synced 2024-12-12 21:57:50 +00:00
Fix bug in replacing ids in shapes, publish new version of utils
This commit is contained in:
Vjacheslav Trushkin
parent
c1773e2554
commit
ecc33f6209
4
packages/utils/package-lock.json
generated
4
packages/utils/package-lock.json
generated
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@iconify/utils",
|
||||
"version": "1.0.9",
|
||||
"version": "1.0.10",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@iconify/utils",
|
||||
"version": "1.0.9",
|
||||
"version": "1.0.10",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@iconify/types": "^1.0.7"
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
"name": "@iconify/utils",
|
||||
"description": "Common functions for working with Iconify icon sets used by various packages.",
|
||||
"author": "Vjacheslav Trushkin",
|
||||
"version": "1.0.9",
|
||||
"version": "1.0.10",
|
||||
"license": "MIT",
|
||||
"bugs": "https://github.com/iconify/iconify/issues",
|
||||
"homepage": "https://iconify.design/",
|
||||
|
||||
@ -2,6 +2,17 @@ import { replaceIDs } from '@iconify/utils/lib/svg/id';
|
||||
|
||||
describe('Testing replaceIDs', () => {
|
||||
it('Simple code', () => {
|
||||
const body =
|
||||
'<defs><path id="test1"></defs><use fill="#FFA000" xlink:href="#test1"/>';
|
||||
const expected =
|
||||
'<defs><path id="callback-0"></defs><use fill="#FFA000" xlink:href="#callback-0"/>';
|
||||
|
||||
// Using callback
|
||||
let counter = 0;
|
||||
expect(replaceIDs(body, () => 'callback-' + counter++)).toBe(expected);
|
||||
});
|
||||
|
||||
it('Many IDs', () => {
|
||||
const 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>';
|
||||
|
||||
@ -33,6 +44,22 @@ describe('Testing replaceIDs', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('Matching parts', () => {
|
||||
let body =
|
||||
'<defs><path id="test1"><path id="test"></defs><use fill="#FFA000" xlink:href="#test1"/><use fill="#00f" xlink:href="#test"/>';
|
||||
const expected =
|
||||
'<defs><path id="callback-0"><path id="callback-1"></defs><use fill="#FFA000" xlink:href="#callback-0"/><use fill="#00f" xlink:href="#callback-1"/>';
|
||||
|
||||
let counter = 0;
|
||||
expect(replaceIDs(body, () => 'callback-' + counter++)).toBe(expected);
|
||||
|
||||
// Reverse order
|
||||
body =
|
||||
'<defs><path id="test"><path id="test1"></defs><use fill="#FFA000" xlink:href="#test"/><use fill="#00f" xlink:href="#test1"/>';
|
||||
counter = 1;
|
||||
expect(replaceIDs(body, () => 'callback-' + counter--)).toBe(expected);
|
||||
});
|
||||
|
||||
it('With animation', () => {
|
||||
const body =
|
||||
'<path d="M12 10.9c-.61 0-1.1.49-1.1 1.1s.49 1.1 1.1 1.1c.61 0 1.1-.49 1.1-1.1s-.49-1.1-1.1-1.1zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm2.19 12.19L6 18l3.81-8.19L18 6l-3.81 8.19z" fill="currentColor"><animateTransform id="ssvg-id-compassb" attributeName="transform" attributeType="XML" type="rotate" from="-90 12 12" to="0 12 12" dur="1s" begin="0;ssvg-id-compassa.end"/><animateTransform id="ssvg-id-compassc" attributeName="transform" attributeType="XML" type="rotate" from="0 12 12" to="-90 12 12" dur="1s" begin="ssvg-id-compassb.end"/><animateTransform id="ssvg-id-compassa" attributeName="transform" attributeType="XML" type="rotate" from="-90 12 12" to="270 12 12" dur="1s" begin="ssvg-id-compassc.end"/></path>';
|
||||
@ -46,4 +73,18 @@ describe('Testing replaceIDs', () => {
|
||||
.replace(/ssvg-id-compassc/g, 'callback-1')
|
||||
);
|
||||
});
|
||||
|
||||
it('Matching id and attribute names', () => {
|
||||
// 'path' matches tag -> callback-0
|
||||
// 'M12' matches path value -> callback-1
|
||||
// 'd' matches attribute -> callback-2
|
||||
const body =
|
||||
'<path d="M12 10.9c1.1zM12 8.M12" fill="currentColor"><animateTransform id="d" attributeName="transform" begin="0;M12.end"/><animateTransform id="path" attributeName="transform" attributeType="XML" type="rotate" from="0 12 12" to="-90 12 12" dur="1s" begin="d.end"/><animateTransform id="M12" attributeName="transform" attributeType="XML" type="rotate" from="-90 12 12" to="270 12 12" dur="1s" begin="path.end"/></path>';
|
||||
const expected =
|
||||
'<path d="M12 10.9c1.1zM12 8.M12" fill="currentColor"><animateTransform id="callback-2" attributeName="transform" begin="0;callback-1.end"/><animateTransform id="callback-0" attributeName="transform" attributeType="XML" type="rotate" from="0 12 12" to="-90 12 12" dur="1s" begin="callback-2.end"/><animateTransform id="callback-1" attributeName="transform" attributeType="XML" type="rotate" from="-90 12 12" to="270 12 12" dur="1s" begin="callback-0.end"/></path>';
|
||||
|
||||
// To avoid messing up counter, using custom callback
|
||||
let counter = 0;
|
||||
expect(replaceIDs(body, () => 'callback-' + counter++)).toBe(expected);
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,20 +1,22 @@
|
||||
/**
|
||||
* IDs usage:
|
||||
*
|
||||
* id="{id}"
|
||||
* xlink:href="#{id}"
|
||||
* url(#{id})
|
||||
*
|
||||
* From SVG animations:
|
||||
*
|
||||
* begin="0;{id}.end"
|
||||
* begin="{id}.end"
|
||||
* begin="{id}.click"
|
||||
*/
|
||||
|
||||
/**
|
||||
* Regular expression for finding ids
|
||||
*/
|
||||
const regex = /\sid="(\S+)"/g;
|
||||
|
||||
/**
|
||||
* Match for allowed characters before and after id in replacement, including () for group
|
||||
*/
|
||||
const replaceValue = '([^A-Za-z0-9_-])';
|
||||
|
||||
/**
|
||||
* Escape value for 'new RegExp()'
|
||||
*/
|
||||
function escapeRegExp(str: string) {
|
||||
return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
|
||||
}
|
||||
|
||||
/**
|
||||
* New random-ish prefix for ids
|
||||
*/
|
||||
@ -30,6 +32,13 @@ const randomPrefix =
|
||||
*/
|
||||
let counter = 0;
|
||||
|
||||
/**
|
||||
* Check if character is a quote
|
||||
*/
|
||||
function isQuote(char: string): boolean {
|
||||
return char === '"' || char === "'";
|
||||
}
|
||||
|
||||
/**
|
||||
* Replace IDs in SVG output with unique IDs
|
||||
* Fast replacement without parsing XML, assuming commonly used patterns and clean XML (icon should have been cleaned up with Iconify Tools or SVGO).
|
||||
@ -48,18 +57,52 @@ export function replaceIDs(
|
||||
return body;
|
||||
}
|
||||
|
||||
// Sort ids by length
|
||||
ids.sort((a, b) => b.length - a.length);
|
||||
|
||||
// Replace with unique ids
|
||||
ids.forEach((id) => {
|
||||
const newID =
|
||||
typeof prefix === 'function' ? prefix() : prefix + counter++;
|
||||
|
||||
body = body.replace(
|
||||
new RegExp(
|
||||
replaceValue + '(' + escapeRegExp(id) + ')' + replaceValue,
|
||||
'g'
|
||||
),
|
||||
'$1' + newID + '$3'
|
||||
);
|
||||
const parts = body.split(id);
|
||||
let lastPart = parts.shift() as string;
|
||||
body = lastPart;
|
||||
|
||||
parts.forEach((part) => {
|
||||
if (!part.length) {
|
||||
// Two ids in a row? Not possible
|
||||
body += id + part;
|
||||
lastPart += id + part;
|
||||
return;
|
||||
}
|
||||
|
||||
const lastChar = lastPart.slice(lastPart.length - 1);
|
||||
const nextChar = part.slice(0, 1);
|
||||
|
||||
// Test if characters around ID are
|
||||
function test(): boolean {
|
||||
if (lastChar === '#') {
|
||||
// xlink:href="#{id}"
|
||||
// url(#{id})
|
||||
return isQuote(nextChar) || nextChar === ')';
|
||||
}
|
||||
|
||||
const isAnimationDot =
|
||||
nextChar === '.' && !!part.slice(1, 2).match(/\w/);
|
||||
if (isQuote(lastChar) || lastChar === ';') {
|
||||
// id="{id}"
|
||||
// begin="0;{id}.end" (coverts all animations)
|
||||
return isQuote(nextChar) || isAnimationDot;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
const success = test();
|
||||
body += (success ? newID : id) + part;
|
||||
lastPart = part;
|
||||
});
|
||||
});
|
||||
|
||||
return body;
|
||||
|
||||
@ -2,6 +2,17 @@ import { replaceIDs } from '../lib/svg/id';
|
||||
|
||||
describe('Testing replaceIDs', () => {
|
||||
test('Simple code', () => {
|
||||
const body =
|
||||
'<defs><path id="test1"></defs><use fill="#FFA000" xlink:href="#test1"/>';
|
||||
const expected =
|
||||
'<defs><path id="callback-0"></defs><use fill="#FFA000" xlink:href="#callback-0"/>';
|
||||
|
||||
// Using callback
|
||||
let counter = 0;
|
||||
expect(replaceIDs(body, () => 'callback-' + counter++)).toBe(expected);
|
||||
});
|
||||
|
||||
test('Many IDs', () => {
|
||||
const 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>';
|
||||
|
||||
@ -33,6 +44,23 @@ describe('Testing replaceIDs', () => {
|
||||
);
|
||||
});
|
||||
|
||||
test('Matching parts', () => {
|
||||
let body =
|
||||
'<defs><path id="test1"><path id="test"></defs><use fill="#FFA000" xlink:href="#test1"/><use fill="#00f" xlink:href="#test"/>';
|
||||
const expected =
|
||||
'<defs><path id="callback-0"><path id="callback-1"></defs><use fill="#FFA000" xlink:href="#callback-0"/><use fill="#00f" xlink:href="#callback-1"/>';
|
||||
|
||||
let counter = 0;
|
||||
expect(replaceIDs(body, () => 'callback-' + counter++)).toBe(expected);
|
||||
|
||||
// Reverse order
|
||||
body =
|
||||
'<defs><path id="test"><path id="test1"></defs><use fill="#FFA000" xlink:href="#test"/><use fill="#00f" xlink:href="#test1"/>';
|
||||
|
||||
counter = 1;
|
||||
expect(replaceIDs(body, () => 'callback-' + counter--)).toBe(expected);
|
||||
});
|
||||
|
||||
test('With animation', () => {
|
||||
const body =
|
||||
'<path d="M12 10.9c-.61 0-1.1.49-1.1 1.1s.49 1.1 1.1 1.1c.61 0 1.1-.49 1.1-1.1s-.49-1.1-1.1-1.1zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm2.19 12.19L6 18l3.81-8.19L18 6l-3.81 8.19z" fill="currentColor"><animateTransform id="ssvg-id-compassb" attributeName="transform" attributeType="XML" type="rotate" from="-90 12 12" to="0 12 12" dur="1s" begin="0;ssvg-id-compassa.end"/><animateTransform id="ssvg-id-compassc" attributeName="transform" attributeType="XML" type="rotate" from="0 12 12" to="-90 12 12" dur="1s" begin="ssvg-id-compassb.end"/><animateTransform id="ssvg-id-compassa" attributeName="transform" attributeType="XML" type="rotate" from="-90 12 12" to="270 12 12" dur="1s" begin="ssvg-id-compassc.end"/></path>';
|
||||
@ -46,4 +74,18 @@ describe('Testing replaceIDs', () => {
|
||||
.replace(/ssvg-id-compassc/g, 'callback-1')
|
||||
);
|
||||
});
|
||||
|
||||
test('Matching parts in attributes, tags and content', () => {
|
||||
// 'path' matches tag -> callback-0
|
||||
// 'M12' matches path value -> callback-1
|
||||
// 'd' matches attribute -> callback-2
|
||||
const body =
|
||||
'<path d="M12 10.9c1.1zM12 8.M12" fill="currentColor"><animateTransform id="d" attributeName="transform" begin="0;M12.end"/><animateTransform id="path" attributeName="transform" attributeType="XML" type="rotate" from="0 12 12" to="-90 12 12" dur="1s" begin="d.end"/><animateTransform id="M12" attributeName="transform" attributeType="XML" type="rotate" from="-90 12 12" to="270 12 12" dur="1s" begin="path.end"/></path>';
|
||||
const expected =
|
||||
'<path d="M12 10.9c1.1zM12 8.M12" fill="currentColor"><animateTransform id="callback-2" attributeName="transform" begin="0;callback-1.end"/><animateTransform id="callback-0" attributeName="transform" attributeType="XML" type="rotate" from="0 12 12" to="-90 12 12" dur="1s" begin="callback-2.end"/><animateTransform id="callback-1" attributeName="transform" attributeType="XML" type="rotate" from="-90 12 12" to="270 12 12" dur="1s" begin="callback-0.end"/></path>';
|
||||
|
||||
// To avoid messing up counter, using custom callback
|
||||
let counter = 0;
|
||||
expect(replaceIDs(body, () => 'callback-' + counter++)).toBe(expected);
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user