mirror of
https://github.com/iconify/iconify.git
synced 2024-12-04 18:23:17 +00:00
chore(utils): add function to make icon square
This commit is contained in:
parent
e4284778e9
commit
127b276b19
@ -3,7 +3,7 @@
|
||||
"type": "module",
|
||||
"description": "Common functions for working with Iconify icon sets used by various packages.",
|
||||
"author": "Vjacheslav Trushkin",
|
||||
"version": "2.1.23",
|
||||
"version": "2.1.24",
|
||||
"license": "MIT",
|
||||
"bugs": "https://github.com/iconify/iconify/issues",
|
||||
"homepage": "https://iconify.design/docs/libraries/utils/",
|
||||
@ -257,6 +257,11 @@
|
||||
"require": "./lib/icon/name.cjs",
|
||||
"import": "./lib/icon/name.mjs"
|
||||
},
|
||||
"./lib/icon/square": {
|
||||
"types": "./lib/icon/square.d.ts",
|
||||
"require": "./lib/icon/square.cjs",
|
||||
"import": "./lib/icon/square.mjs"
|
||||
},
|
||||
"./lib/icon/transformations": {
|
||||
"types": "./lib/icon/transformations.d.ts",
|
||||
"require": "./lib/icon/transformations.cjs",
|
||||
|
@ -7,6 +7,7 @@ import type {
|
||||
IconCSSItemOptions,
|
||||
IconContentItemOptions,
|
||||
} from './types';
|
||||
import { makeIconSquare } from '../icon/square';
|
||||
|
||||
/**
|
||||
* Generates common CSS rules for multiple icons, rendered as background/mask
|
||||
@ -64,14 +65,7 @@ export function generateItemCSSRules(
|
||||
if (icon.width !== icon.height) {
|
||||
if (options.forceSquare) {
|
||||
// Change viewBox
|
||||
const max = Math.max(icon.width, icon.height);
|
||||
icon = {
|
||||
...icon,
|
||||
width: max,
|
||||
height: max,
|
||||
left: icon.left - (max - icon.width) / 2,
|
||||
top: icon.top - (max - icon.height) / 2,
|
||||
};
|
||||
icon = makeIconSquare(icon);
|
||||
} else {
|
||||
// Change width in result
|
||||
result['width'] = calculateSize('1em', icon.width / icon.height);
|
||||
|
21
packages/utils/src/icon/square.ts
Normal file
21
packages/utils/src/icon/square.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import type { IconifyIcon } from '@iconify/types';
|
||||
|
||||
/**
|
||||
* Make icon square
|
||||
*/
|
||||
export function makeIconSquare(
|
||||
icon: Required<IconifyIcon>
|
||||
): Required<IconifyIcon> {
|
||||
if (icon.width !== icon.height) {
|
||||
// Change viewBox
|
||||
const max = Math.max(icon.width, icon.height);
|
||||
return {
|
||||
...icon,
|
||||
width: max,
|
||||
height: max,
|
||||
left: icon.left - (max - icon.width) / 2,
|
||||
top: icon.top - (max - icon.height) / 2,
|
||||
};
|
||||
}
|
||||
return icon;
|
||||
}
|
@ -35,6 +35,7 @@ export type {
|
||||
PartialExtendedIconifyIcon,
|
||||
FullExtendedIconifyIcon,
|
||||
} from './icon/defaults';
|
||||
export { makeIconSquare } from './icon/square';
|
||||
|
||||
// Icon set functions
|
||||
export { getIconsTree } from './icon-set/tree';
|
||||
|
Loading…
Reference in New Issue
Block a user