agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2025-01-07 15:44:05 +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) { p:nth-child(2n) {
background-color: #f8f8f8; background-color: #f8f8f8;
} }
svg:hover { :where(p:hover) .iconify {
color: green;
}
.iconify:hover {
color: red; color: red;
} }
</style> </style>
@ -43,16 +46,32 @@
<script src="../dist/iconify.min.js"></script> <script src="../dist/iconify.min.js"></script>
</head> </head>
<body> <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> <p>
Icons that behave like images: Icons that behave like images:
<span class="iconify" data-icon="bi:house-door"></span> <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"></i>
<i class="iconify" data-icon="cif:ee" data-mode="style"></i>
</p> </p>
<p> <p>
Icon that behaves like an glyph (aligned to bottom of this text): 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"></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"></i>
<i class="iconify-inline" data-icon="cif:ee" data-mode="style"></i>
</p> </p>
<p> <p>
Changing icon color: Changing icon color:
@ -61,6 +80,12 @@
style="color: red" style="color: red"
data-icon="bi:house-door" data-icon="bi:house-door"
></span> ></span>
<span
class="iconify-inline"
style="color: red"
data-icon="bi:house-door"
data-mode="style"
></span>
</p> </p>
<p> <p>
Big icon (showing various ways to do it): Big icon (showing various ways to do it):
@ -69,11 +94,23 @@
data-icon="bi:person-lines-fill" data-icon="bi:person-lines-fill"
style="font-size: 2em" style="font-size: 2em"
></span> ></span>
<span
class="iconify-inline"
data-icon="bi:person-lines-fill"
style="font-size: 2em"
data-mode="style"
></span>
<span <span
class="iconify-inline" class="iconify-inline"
data-icon="bi:person-lines-fill" data-icon="bi:person-lines-fill"
data-height="2em" data-height="2em"
></span> ></span>
<span
class="iconify-inline"
data-icon="bi:person-lines-fill"
data-height="2em"
data-mode="style"
></span>
<br /> <br />
Icons above should be aligned differently because they have Icons above should be aligned differently because they have
different font-size. Vertical alignment is relative to font size. different font-size. Vertical alignment is relative to font size.
@ -85,11 +122,23 @@
data-icon="bi:person-lines-fill" data-icon="bi:person-lines-fill"
style="font-size: 2em" style="font-size: 2em"
></span> ></span>
<span
class="iconify"
data-icon="bi:person-lines-fill"
style="font-size: 2em"
data-mode="style"
></span>
<span <span
class="iconify" class="iconify"
data-icon="bi:person-lines-fill" data-icon="bi:person-lines-fill"
data-height="2em" data-height="2em"
></span> ></span>
<span
class="iconify"
data-icon="bi:person-lines-fill"
data-height="2em"
data-mode="style"
></span>
<br /> <br />
Icons above should be aligned identically because they are not using Icons above should be aligned identically because they are not using
inline mode. inline mode.
@ -97,40 +146,86 @@
<p> <p>
Rotation: Rotation:
<span class="iconify-inline" data-icon="bi:image"></span> <span class="iconify-inline" data-icon="bi:image"></span>
<span
class="iconify-inline"
data-icon="bi:image"
data-mode="style"
></span>
<span <span
class="iconify-inline" class="iconify-inline"
data-icon="bi:image" data-icon="bi:image"
data-rotate="1" data-rotate="1"
></span> ></span>
<span
class="iconify-inline"
data-icon="bi:image"
data-rotate="1"
data-mode="style"
></span>
<span <span
class="iconify-inline" class="iconify-inline"
data-icon="bi:image" data-icon="bi:image"
data-rotate="180deg" data-rotate="180deg"
></span> ></span>
<span
class="iconify-inline"
data-icon="bi:image"
data-rotate="180deg"
data-mode="style"
></span>
<span <span
class="iconify-inline" class="iconify-inline"
data-icon="bi:image" data-icon="bi:image"
data-rotate="75%" data-rotate="75%"
></span> ></span>
<span
class="iconify-inline"
data-icon="bi:image"
data-rotate="75%"
data-mode="style"
></span>
</p> </p>
<p> <p>
Flip: Flip:
<span class="iconify-inline" data-icon="test:icon"></span> <span class="iconify-inline" data-icon="test:icon"></span>
<span
class="iconify-inline"
data-icon="test:icon"
data-mode="style"
></span>
<span <span
class="iconify-inline" class="iconify-inline"
data-icon="test:icon" data-icon="test:icon"
data-flip="horizontal" data-flip="horizontal"
></span> ></span>
<span
class="iconify-inline"
data-icon="test:icon"
data-flip="horizontal"
data-mode="style"
></span>
<span <span
class="iconify-inline" class="iconify-inline"
data-icon="test:icon" data-icon="test:icon"
data-flip="vertical" data-flip="vertical"
></span> ></span>
<span
class="iconify-inline"
data-icon="test:icon"
data-flip="vertical"
data-mode="style"
></span>
<span <span
class="iconify-inline" class="iconify-inline"
data-icon="test:icon" data-icon="test:icon"
data-flip="horizontal,vertical" data-flip="horizontal,vertical"
></span> ></span>
<span
class="iconify-inline"
data-icon="test:icon"
data-flip="horizontal,vertical"
data-mode="style"
></span>
</p> </p>
</body> </body>
</html> </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 blockClass = 'iconify';
export const inlineClass = 'iconify-inline'; export const inlineClass = 'iconify-inline';
/**
* Icon render mode
*/
export type IconRenderMode = 'style' | 'inline';
/** /**
* Data used to verify if icon is the same * Data used to verify if icon is the same
*/ */
@ -19,6 +24,9 @@ export interface IconifyElementProps {
// Customisations // Customisations
customisations: Required<IconifyIconCustomisations>; customisations: Required<IconifyIconCustomisations>;
// Render mode
mode?: IconRenderMode;
} }
/** /**

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

@ -6,7 +6,7 @@ import {
alignmentFromString, alignmentFromString,
flipFromString, flipFromString,
} from '@iconify/utils/lib/customisations/shorthand'; } from '@iconify/utils/lib/customisations/shorthand';
import { inlineClass } from './config'; import { IconRenderMode, inlineClass } from './config';
import type { IconifyElementProps } 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 { return {
name, name,
icon, icon,
customisations, customisations,
mode,
}; };
} }

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

@ -22,7 +22,7 @@ import {
stopObserving, stopObserving,
} from '../observer'; } from '../observer';
import { renderInlineSVG } from '../render/svg'; import { renderInlineSVG } from '../render/svg';
// import { renderBackground } from '../render/bg'; import { renderBackground } from '../render/bg';
/** /**
* Flag to avoid scanning DOM too often * Flag to avoid scanning DOM too often
@ -122,8 +122,15 @@ export function scanDOM(rootNode?: ObservedNode, addTempNode = false): void {
paused = true; paused = true;
pauseObservingNode(observedNode); 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 // Find all elements