agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-11-09 23:00:56 +00:00
Code Issues Releases Activity

svg framework: add data-mode attribute

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2022-04-08 11:07:09 +03:00
parent dfdb73d649
commit 9e3bc44b7e
4 changed files with 122 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
packages/iconify/demo/usage.html
View File

@ -24,7 +24,10 @@
p:nth-child(2n) {
background-color: #f8f8f8;
}
svg:hover {
:where(p:hover) .iconify {
color: green;
}
.iconify:hover {
color: red;
}
</style>
@ -43,16 +46,32 @@
<script src="../dist/iconify.min.js"></script>
</head>
<body>
<p>This is a simple HTML page with few icons.</p>
<p>
This is a simple HTML page with few icons.<br />
There are 2 entries for each sample: one as inline SVG, one using
style.
</p>
<p>
Icons that behave like images:
<span class="iconify" data-icon="bi:house-door"></span>
<span
class="iconify"
data-icon="bi:house-door"
data-mode="style"
></span>
<i class="iconify" data-icon="cif:ee"></i>
<i class="iconify" data-icon="cif:ee" data-mode="style"></i>
</p>
<p>
Icon that behaves like an glyph (aligned to bottom of this text):
<span class="iconify-inline" data-icon="bi:house-door"></span>
<span
class="iconify-inline"
data-icon="bi:house-door"
data-mode="style"
></span>
<i class="iconify-inline" data-icon="cif:ee"></i>
<i class="iconify-inline" data-icon="cif:ee" data-mode="style"></i>
</p>
<p>
Changing icon color:
@ -61,6 +80,12 @@
style="color: red"
data-icon="bi:house-door"
></span>
<span
class="iconify-inline"
style="color: red"
data-icon="bi:house-door"
data-mode="style"
></span>
</p>
<p>
Big icon (showing various ways to do it):
@ -69,11 +94,23 @@
data-icon="bi:person-lines-fill"
style="font-size: 2em"
></span>
<span
class="iconify-inline"
data-icon="bi:person-lines-fill"
style="font-size: 2em"
data-mode="style"
></span>
<span
class="iconify-inline"
data-icon="bi:person-lines-fill"
data-height="2em"
></span>
<span
class="iconify-inline"
data-icon="bi:person-lines-fill"
data-height="2em"
data-mode="style"
></span>
<br />
Icons above should be aligned differently because they have
different font-size. Vertical alignment is relative to font size.
@ -85,11 +122,23 @@
data-icon="bi:person-lines-fill"
style="font-size: 2em"
></span>
<span
class="iconify"
data-icon="bi:person-lines-fill"
style="font-size: 2em"
data-mode="style"
></span>
<span
class="iconify"
data-icon="bi:person-lines-fill"
data-height="2em"
></span>
<span
class="iconify"
data-icon="bi:person-lines-fill"
data-height="2em"
data-mode="style"
></span>
<br />
Icons above should be aligned identically because they are not using
inline mode.
@ -97,40 +146,86 @@
<p>
Rotation:
<span class="iconify-inline" data-icon="bi:image"></span>
<span
class="iconify-inline"
data-icon="bi:image"
data-mode="style"
></span>
<span
class="iconify-inline"
data-icon="bi:image"
data-rotate="1"
></span>
<span
class="iconify-inline"
data-icon="bi:image"
data-rotate="1"
data-mode="style"
></span>
<span
class="iconify-inline"
data-icon="bi:image"
data-rotate="180deg"
></span>
<span
class="iconify-inline"
data-icon="bi:image"
data-rotate="180deg"
data-mode="style"
></span>
<span
class="iconify-inline"
data-icon="bi:image"
data-rotate="75%"
></span>
<span
class="iconify-inline"
data-icon="bi:image"
data-rotate="75%"
data-mode="style"
></span>
</p>
<p>
Flip:
<span class="iconify-inline" data-icon="test:icon"></span>
<span
class="iconify-inline"
data-icon="test:icon"
data-mode="style"
></span>
<span
class="iconify-inline"
data-icon="test:icon"
data-flip="horizontal"
></span>
<span
class="iconify-inline"
data-icon="test:icon"
data-flip="horizontal"
data-mode="style"
></span>
<span
class="iconify-inline"
data-icon="test:icon"
data-flip="vertical"
></span>
<span
class="iconify-inline"
data-icon="test:icon"
data-flip="vertical"
data-mode="style"
></span>
<span
class="iconify-inline"
data-icon="test:icon"
data-flip="horizontal,vertical"
></span>
<span
class="iconify-inline"
data-icon="test:icon"
data-flip="horizontal,vertical"
data-mode="style"
></span>
</p>
</body>
</html>

8
packages/iconify/src/scanner/config.ts
View File

@ -7,6 +7,11 @@ import type { IconifyIconCustomisations } from '@iconify/utils/lib/customisation
export const blockClass = 'iconify';
export const inlineClass = 'iconify-inline';
/**
* Icon render mode
*/
export type IconRenderMode = 'style' | 'inline';
/**
* Data used to verify if icon is the same
*/
@ -19,6 +24,9 @@ export interface IconifyElementProps {
// Customisations
customisations: Required<IconifyIconCustomisations>;
// Render mode
mode?: IconRenderMode;
}
/**

8
packages/iconify/src/scanner/get-props.ts
View File

@ -6,7 +6,7 @@ import {
alignmentFromString,
flipFromString,
} from '@iconify/utils/lib/customisations/shorthand';
import { inlineClass } from './config';
import { IconRenderMode, inlineClass } from './config';
import type { IconifyElementProps } from './config';
/**
@ -99,9 +99,15 @@ export function getElementProps(element: Element): IconifyElementProps | null {
}
});
// Get render mode. Not checking actual value because incorrect values are treated as inline
const mode = element.getAttribute('data-mode') as
| IconRenderMode
| undefined;
return {
name,
icon,
customisations,
mode,
};
}

13
packages/iconify/src/scanner/index.ts
View File

@ -22,7 +22,7 @@ import {
stopObserving,
} from '../observer';
import { renderInlineSVG } from '../render/svg';
// import { renderBackground } from '../render/bg';
import { renderBackground } from '../render/bg';
/**
* Flag to avoid scanning DOM too often
@ -122,8 +122,15 @@ export function scanDOM(rootNode?: ObservedNode, addTempNode = false): void {
paused = true;
pauseObservingNode(observedNode);
}
renderInlineSVG(element, props, iconData);
// renderBackground(element, props, iconData);
if (
element.tagName.toUpperCase() === 'SVG' ||
props.mode !== 'style'
) {
renderInlineSVG(element, props, iconData);
} else {
renderBackground(element, props, iconData);
}
}
// Find all elements