2020-08-22 12:31:44 +00:00
|
|
|
import { defaults } from '@iconify/core/lib/customisations';
|
|
|
|
import {
|
|
|
|
flipFromString,
|
|
|
|
alignmentFromString,
|
|
|
|
} from '@iconify/core/lib/customisations/shorthand';
|
|
|
|
import { rotateFromString } from '@iconify/core/lib/customisations/rotate';
|
|
|
|
import { fullIcon } from '@iconify/core/lib/icon';
|
|
|
|
import { iconToSVG } from '@iconify/core/lib/builder';
|
|
|
|
import { replaceIDs } from '@iconify/core/lib/builder/ids';
|
|
|
|
import { merge } from '@iconify/core/lib/misc/merge';
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Default SVG attributes
|
|
|
|
*/
|
|
|
|
const svgDefaults = {
|
|
|
|
'xmlns': 'http://www.w3.org/2000/svg',
|
|
|
|
'xmlns:xlink': 'http://www.w3.org/1999/xlink',
|
|
|
|
'aria-hidden': true,
|
|
|
|
'role': 'img',
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Generate icon from properties
|
|
|
|
*/
|
|
|
|
export function generateIcon(props) {
|
|
|
|
let iconData = fullIcon(props.icon);
|
|
|
|
if (!iconData) {
|
|
|
|
return {
|
|
|
|
attributes: svgDefaults,
|
|
|
|
body: '',
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
const customisations = merge(defaults, props);
|
|
|
|
const componentProps = merge(svgDefaults);
|
|
|
|
|
|
|
|
// Create style if missing
|
|
|
|
let style = typeof props.style === 'string' ? props.style : '';
|
|
|
|
|
|
|
|
// Get element properties
|
|
|
|
for (let key in props) {
|
|
|
|
const value = props[key];
|
|
|
|
switch (key) {
|
|
|
|
// Properties to ignore
|
|
|
|
case 'icon':
|
|
|
|
case 'style':
|
|
|
|
break;
|
|
|
|
|
|
|
|
// Flip as string: 'horizontal,vertical'
|
|
|
|
case 'flip':
|
|
|
|
flipFromString(customisations, value);
|
|
|
|
break;
|
|
|
|
|
|
|
|
// Alignment as string
|
|
|
|
case 'align':
|
|
|
|
alignmentFromString(customisations, value);
|
|
|
|
break;
|
|
|
|
|
|
|
|
// Color: copy to style
|
|
|
|
case 'color':
|
|
|
|
style = 'color: ' + value + '; ' + style;
|
|
|
|
break;
|
|
|
|
|
|
|
|
// Rotation as string
|
|
|
|
case 'rotate':
|
|
|
|
if (typeof value !== 'number') {
|
|
|
|
customisations[key] = rotateFromString(value);
|
|
|
|
} else {
|
|
|
|
componentProps[key] = value;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
|
|
|
|
// Remove aria-hidden
|
|
|
|
case 'ariaHidden':
|
|
|
|
case 'aria-hidden':
|
|
|
|
if (value !== true && value !== 'true') {
|
|
|
|
delete componentProps['aria-hidden'];
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
|
|
|
|
// Copy missing property if it does not exist in customisations
|
|
|
|
default:
|
|
|
|
if (defaults[key] === void 0) {
|
|
|
|
componentProps[key] = value;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Generate icon
|
|
|
|
const item = iconToSVG(iconData, customisations);
|
|
|
|
|
|
|
|
// Add icon stuff
|
|
|
|
for (let key in item.attributes) {
|
|
|
|
componentProps[key] = item.attributes[key];
|
|
|
|
}
|
|
|
|
|
|
|
|
if (item.inline) {
|
|
|
|
style = 'vertical-align: -0.125em; ' + style;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Style
|
|
|
|
if (style !== '') {
|
|
|
|
componentProps.style = style;
|
|
|
|
}
|
|
|
|
|
2021-02-15 08:31:05 +00:00
|
|
|
// Counter for ids based on "id" property to render icons consistently on server and client
|
|
|
|
let localCounter = 0;
|
|
|
|
const id = props.id;
|
|
|
|
|
2020-08-22 12:31:44 +00:00
|
|
|
// Generate HTML
|
|
|
|
return {
|
|
|
|
attributes: componentProps,
|
2021-02-15 08:31:05 +00:00
|
|
|
body: replaceIDs(
|
|
|
|
item.body,
|
|
|
|
id ? () => id + '-' + localCounter++ : 'iconify-svelte-'
|
|
|
|
),
|
2020-08-22 12:31:44 +00:00
|
|
|
};
|
|
|
|
}
|