2022-02-26 14:12:13 +00:00
|
|
|
import type { Awaitable } from '@antfu/utils';
|
2022-02-26 17:31:45 +00:00
|
|
|
import type { IconifyLoaderOptions } from './types';
|
2021-12-09 21:12:00 +00:00
|
|
|
|
2022-03-17 11:48:49 +00:00
|
|
|
const svgWidthRegex = /width\s*=\s*["'](\w+)["']/;
|
|
|
|
const svgHeightRegex = /height\s*=\s*["'](\w+)["']/;
|
2022-03-17 09:07:29 +00:00
|
|
|
|
2022-03-17 11:48:49 +00:00
|
|
|
function configureSvgSize(
|
|
|
|
svg: string,
|
|
|
|
props: Record<string, string>,
|
|
|
|
scale?: number
|
|
|
|
): [boolean, boolean] {
|
|
|
|
const svgNode = svg.slice(0, svg.indexOf('>'));
|
|
|
|
|
|
|
|
let result = svgWidthRegex.exec(svgNode);
|
|
|
|
const w = result != null;
|
|
|
|
if (typeof props.width === 'undefined' || props.width === null) {
|
|
|
|
if (typeof scale === 'number') {
|
|
|
|
props.width = `${scale}em`;
|
|
|
|
} else if (result) {
|
|
|
|
props.width = result[1];
|
|
|
|
}
|
2022-03-17 09:07:29 +00:00
|
|
|
}
|
|
|
|
|
2022-03-17 11:48:49 +00:00
|
|
|
result = svgHeightRegex.exec(svgNode);
|
|
|
|
const h = result != null;
|
|
|
|
if (typeof props.height === 'undefined' || props.height === null) {
|
|
|
|
if (typeof scale === 'number') {
|
|
|
|
props.height = `${scale}em`;
|
|
|
|
} else if (result) {
|
|
|
|
props.height = result[1];
|
|
|
|
}
|
2022-03-17 09:07:29 +00:00
|
|
|
}
|
|
|
|
|
2022-03-17 11:48:49 +00:00
|
|
|
return [w, h];
|
2022-03-17 09:07:29 +00:00
|
|
|
}
|
|
|
|
|
2022-01-10 12:43:35 +00:00
|
|
|
export async function mergeIconProps(
|
|
|
|
svg: string,
|
|
|
|
collection: string,
|
|
|
|
icon: string,
|
2022-02-26 17:31:45 +00:00
|
|
|
options?: IconifyLoaderOptions,
|
2022-03-04 16:37:21 +00:00
|
|
|
propsProvider?: () => Awaitable<Record<string, string>>
|
2022-01-10 12:43:35 +00:00
|
|
|
): Promise<string> {
|
2022-03-04 16:37:21 +00:00
|
|
|
const { scale, addXmlNs = false } = options ?? {};
|
|
|
|
const { additionalProps = {}, iconCustomizer } =
|
|
|
|
options?.customizations ?? {};
|
2022-02-26 15:44:24 +00:00
|
|
|
const props: Record<string, string> = (await propsProvider?.()) ?? {};
|
2022-02-26 17:31:45 +00:00
|
|
|
|
2022-01-10 16:08:40 +00:00
|
|
|
await iconCustomizer?.(collection, icon, props);
|
2022-01-10 12:43:35 +00:00
|
|
|
Object.keys(additionalProps).forEach((p) => {
|
2022-01-10 16:08:40 +00:00
|
|
|
const v = additionalProps[p];
|
|
|
|
if (v !== undefined && v !== null) props[p] = v;
|
|
|
|
});
|
2022-03-17 09:07:29 +00:00
|
|
|
|
2022-03-17 11:48:49 +00:00
|
|
|
const [widthOnSvg, heightOnSvg] = configureSvgSize(svg, props, scale);
|
2022-03-17 09:07:29 +00:00
|
|
|
|
2022-02-26 16:20:16 +00:00
|
|
|
// add xml namespaces if necessary
|
|
|
|
if (addXmlNs) {
|
|
|
|
// add svg xmlns if missing
|
|
|
|
if (!svg.includes(' xmlns=') && !props['xmlns']) {
|
|
|
|
props['xmlns'] = 'http://www.w3.org/2000/svg';
|
|
|
|
}
|
|
|
|
// add xmlns:xlink if xlink present and the xmlns missing
|
2022-03-04 16:37:21 +00:00
|
|
|
if (
|
|
|
|
!svg.includes(' xmlns:xlink=') &&
|
|
|
|
svg.includes('xlink:') &&
|
|
|
|
!props['xmlns:xlink']
|
|
|
|
) {
|
2022-02-26 16:20:16 +00:00
|
|
|
props['xmlns:xlink'] = 'http://www.w3.org/1999/xlink';
|
|
|
|
}
|
2022-02-26 14:12:13 +00:00
|
|
|
}
|
2022-02-26 16:20:16 +00:00
|
|
|
|
2022-02-26 17:31:45 +00:00
|
|
|
svg = svg.replace(
|
2022-02-26 16:20:16 +00:00
|
|
|
'<svg ',
|
2022-03-04 16:37:21 +00:00
|
|
|
`<svg ${Object.keys(props)
|
2022-03-17 11:48:49 +00:00
|
|
|
.map((p) =>
|
|
|
|
(p === 'width' && widthOnSvg) || (p === 'height' && heightOnSvg)
|
|
|
|
? null
|
|
|
|
: `${p}="${props[p]}"`
|
|
|
|
)
|
|
|
|
.filter((p) => p != null)
|
2022-03-18 09:30:46 +00:00
|
|
|
.join(' ')} `
|
2022-01-10 16:08:40 +00:00
|
|
|
);
|
2022-02-26 17:31:45 +00:00
|
|
|
|
|
|
|
if (svg && options) {
|
2022-03-04 16:37:21 +00:00
|
|
|
const { defaultStyle, defaultClass } = options;
|
2022-02-26 17:31:45 +00:00
|
|
|
// additional props and iconCustomizer takes precedence
|
|
|
|
if (defaultClass && !svg.includes(' class=')) {
|
|
|
|
svg = svg.replace('<svg ', `<svg class="${defaultClass}" `);
|
|
|
|
}
|
|
|
|
// additional props and iconCustomizer takes precedence
|
|
|
|
if (defaultStyle && !svg.includes(' style=')) {
|
|
|
|
svg = svg.replace('<svg ', `<svg style="${defaultStyle}" `);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-03-17 15:10:03 +00:00
|
|
|
const usedProps = options?.usedProps;
|
|
|
|
if (usedProps) {
|
2022-03-17 13:59:51 +00:00
|
|
|
Object.keys(additionalProps).forEach((p) => {
|
|
|
|
const v = props[p];
|
2022-03-17 15:10:03 +00:00
|
|
|
if (v !== undefined && v !== null) usedProps[p] = v;
|
2022-03-17 13:59:51 +00:00
|
|
|
});
|
|
|
|
if (typeof props.width !== 'undefined' && props.width !== null) {
|
2022-03-17 15:10:03 +00:00
|
|
|
usedProps.width = props.width;
|
2022-03-17 13:59:51 +00:00
|
|
|
}
|
|
|
|
if (typeof props.height !== 'undefined' && props.height !== null) {
|
2022-03-17 15:10:03 +00:00
|
|
|
usedProps.height = props.height;
|
2022-03-17 13:59:51 +00:00
|
|
|
}
|
2022-03-17 09:07:29 +00:00
|
|
|
}
|
|
|
|
|
2022-02-26 17:31:45 +00:00
|
|
|
return svg;
|
2022-01-10 12:43:35 +00:00
|
|
|
}
|