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:
parent
63462d9ddb
commit
d2db5eceb4
@ -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';
|
||||
|
@ -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,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user