2
0
mirror of https://github.com/iconify/iconify.git synced 2024-11-08 14:20:57 +00:00

chore: add convertParsedSVG to utils, add new functions to index

This commit is contained in:
Vjacheslav Trushkin 2023-08-19 09:35:01 +03:00
parent 63462d9ddb
commit d2db5eceb4
3 changed files with 91 additions and 21 deletions

View File

@ -53,6 +53,7 @@ export { convertIconSetInfo } from './icon-set/convert-info';
// Build SVG
export { iconToSVG } from './svg/build';
export type { IconifyIconBuildResult } from './svg/build';
export { splitSVGDefs, mergeDefsAndContent, wrapSVGContent } from './svg/defs';
export { replaceIDs } from './svg/id';
export { calculateSize } from './svg/size';
export { encodeSvgForCss } from './svg/encode-svg-for-css';
@ -60,6 +61,10 @@ export { trimSVG } from './svg/trim';
export { iconToHTML } from './svg/html';
export { svgToURL, svgToData } from './svg/url';
export { cleanUpInnerHTML } from './svg/inner-html';
export { getSVGViewBox } from './svg/viewbox';
export type { SVGViewBox } from './svg/viewbox';
export { parseSVGContent, buildParsedSVG, convertParsedSVG } from './svg/parse';
export type { ParsedSVGContent } from './svg/parse';
// Colors
export { colorKeywords } from './colors/keywords';

View File

@ -1,6 +1,7 @@
import { IconifyIcon } from '@iconify/types';
import { IconifyIconBuildResult } from './build';
import { wrapSVGContent } from './defs';
import { getSVGViewBox } from './viewbox';
import { SVGViewBox, getSVGViewBox } from './viewbox';
/**
* Parsed SVG content
@ -44,12 +45,14 @@ export function parseSVGContent(content: string): ParsedSVGContent | undefined {
};
}
/**
* Convert parsed SVG to IconifyIconBuildResult
*/
export function buildParsedSVG(
data: ParsedSVGContent
): IconifyIconBuildResult | undefined {
interface BuildResult {
width?: string;
height?: string;
viewBox: SVGViewBox;
body: string;
}
function build(data: ParsedSVGContent): BuildResult | undefined {
const attribs = data.attribs;
const viewBox = getSVGViewBox(attribs['viewBox'] ?? '');
if (!viewBox) {
@ -79,14 +82,51 @@ export function buildParsedSVG(
}
return {
attributes: {
// Copy dimensions if exist
width: attribs.width,
height: attribs.height,
// Merge viewBox
viewBox: viewBox.join(' '),
},
// Copy dimensions if exist
width: attribs.width,
height: attribs.height,
viewBox,
body,
};
}
/**
* Convert parsed SVG to IconifyIconBuildResult
*/
export function buildParsedSVG(
data: ParsedSVGContent
): IconifyIconBuildResult | undefined {
const result = build(data);
if (result) {
return {
attributes: {
// Copy dimensions if exist
width: result.width,
height: result.height,
// Merge viewBox
viewBox: result.viewBox.join(' '),
},
viewBox: result.viewBox,
body: result.body,
};
}
}
/**
* Convert parsed SVG to IconifyIcon
*/
export function convertParsedSVG(
data: ParsedSVGContent
): IconifyIcon | undefined {
const result = build(data);
if (result) {
const viewBox = result.viewBox;
return {
left: viewBox[0],
top: viewBox[1],
width: viewBox[2],
height: viewBox[3],
body: result.body,
};
}
}

View File

@ -1,8 +1,13 @@
import { IconifyIconBuildResult } from '../lib/svg/build';
import { parseSVGContent, buildParsedSVG } from '../lib/svg/parse';
import {
parseSVGContent,
buildParsedSVG,
convertParsedSVG,
} from '../lib/svg/parse';
import { splitSVGDefs } from '../lib/svg/defs';
import { getSVGViewBox } from '../lib/svg/viewbox';
import { readFileSync } from 'node:fs';
import { IconifyIcon } from '@iconify/types';
const fixturesDir = './tests/fixtures';
@ -55,6 +60,16 @@ describe('Testing parsing SVG content', () => {
};
expect(built).toEqual(expected);
const icon = convertParsedSVG(parsed);
const expectedIcon: IconifyIcon = {
left: 0,
top: 0,
width: 24,
height: 24,
body,
};
expect(icon).toEqual(expectedIcon);
// Defs
expect(splitSVGDefs(body)).toEqual({
defs: '',
@ -109,7 +124,7 @@ describe('Testing parsing SVG content', () => {
const body = `${body1}<defs id="defs6">${defs1}</defs>${body2}`;
const svg = `
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.5 47.5" style="enable-background:new 0 0 47.5 47.5;" xml:space="preserve" version="1.1" id="svg2">
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 -1 47.5 49.5" style="enable-background:new 0 -1 47.5 49.5;" xml:space="preserve" version="1.1" id="svg2">
${body}
</svg>`;
@ -125,8 +140,8 @@ describe('Testing parsing SVG content', () => {
'xmlns:rdf': 'http://www.w3.org/1999/02/22-rdf-syntax-ns#',
'xmlns:svg': 'http://www.w3.org/2000/svg',
'xmlns': 'http://www.w3.org/2000/svg',
'viewBox': '0 0 47.5 47.5',
'style': 'enable-background:new 0 0 47.5 47.5;',
'viewBox': '0 -1 47.5 49.5',
'style': 'enable-background:new 0 -1 47.5 49.5;',
'xml:space': 'preserve',
'version': '1.1',
'id': 'svg2',
@ -137,13 +152,23 @@ describe('Testing parsing SVG content', () => {
const built = buildParsedSVG(parsed);
const expected: IconifyIconBuildResult = {
attributes: {
viewBox: '0 0 47.5 47.5',
viewBox: '0 -1 47.5 49.5',
},
viewBox: [0, 0, 47.5, 47.5],
body: `<defs>${defs1}</defs><g style="enable-background:new 0 0 47.5 47.5;">${body1}${body2}</g>`,
viewBox: [0, -1, 47.5, 49.5],
body: `<defs>${defs1}</defs><g style="enable-background:new 0 -1 47.5 49.5;">${body1}${body2}</g>`,
};
expect(built).toEqual(expected);
const icon = convertParsedSVG(parsed);
const expectedIcon: IconifyIcon = {
left: 0,
top: -1,
width: 47.5,
height: 49.5,
body: expected.body,
};
expect(icon).toEqual(expectedIcon);
// Defs
expect(splitSVGDefs(body)).toEqual({
defs: defs1,