mirror of
https://github.com/iconify/iconify.git
synced 2024-11-10 07:11:00 +00:00
chore: keep innerHTML in web component, export functions for building icon
This commit is contained in:
Vjacheslav Trushkin
parent
d9ffc20a20
commit
5609290538
@ -20,13 +20,13 @@ Iconify Icon web component renders icons.
|
||||
Add this line to your page to load IconifyIcon (you can add it to `<head>` section of the page or before `</body>`):
|
||||
|
||||
```html
|
||||
<script src="https://code.iconify.design/iconify-icon/1.0.8/iconify-icon.min.js"></script>
|
||||
<script src="https://code.iconify.design/iconify-icon/1.1.0-beta.1/iconify-icon.min.js"></script>
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.8/dist/iconify-icon.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.1.0-beta.1/dist/iconify-icon.min.js"></script>
|
||||
```
|
||||
|
||||
or, if you are building a project with a bundler, you can include the script by installing `iconify-icon` as a dependency and importing it in your project:
|
||||
|
||||
@ -103,6 +103,16 @@
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const span = document.querySelector('.test-2sec');
|
||||
if (span) {
|
||||
const icon =
|
||||
span.parentElement.querySelector('iconify-icon');
|
||||
span.remove();
|
||||
icon.setAttribute('icon', 'test:icon');
|
||||
}
|
||||
}, 2000);
|
||||
})();
|
||||
</script>
|
||||
<script src="../dist/iconify-icon.min.js"></script>
|
||||
@ -322,6 +332,42 @@
|
||||
mode="style"
|
||||
></iconify-icon>
|
||||
</p>
|
||||
|
||||
<h2>Icon with innerHTML</h2>
|
||||
<p>
|
||||
Keeping innerHTML without icon attribute:
|
||||
<iconify-icon>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M16.5 12.5v1q0 .2.15.35T17 14q.2 0 .35-.15t.15-.35v-1h1q.2 0 .35-.15T19 12q0-.2-.15-.35t-.35-.15h-1v-1q0-.2-.15-.35T17 10q-.2 0-.35.15t-.15.35v1h-1q-.2 0-.35.15T15 12q0 .2.15.35t.35.15zm-4 .25l1.55 1.975q.05.075.55.275q.425 0 .625-.387t-.075-.738L13.75 12l1.425-1.9q.275-.35.075-.725T14.6 9q-.175 0-.312.075t-.238.2L12.5 11.25v-1.5q0-.325-.213-.538T11.75 9q-.325 0-.537.213T11 9.75v4.5q0 .325.213.538t.537.212q.325 0 .538-.213t.212-.537zm-5 .75v-1H9q.425 0 .713-.288T10 11.5V10q0-.425-.288-.712T9 9H6.75q-.325 0-.537.213T6 9.75q0 .325.213.538t.537.212H8.5v1H7q-.425 0-.712.288T6 12.5v1.75q0 .325.213.538T6.75 15h2.5q.325 0 .538-.213T10 14.25q0-.325-.213-.537T9.25 13.5zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21z"
|
||||
/>
|
||||
</svg>
|
||||
</iconify-icon>
|
||||
</p>
|
||||
<p>
|
||||
Keeping innerHTML,
|
||||
<span class="test-2sec">updating after 2 seconds...</span>:
|
||||
<iconify-icon>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M16.5 12.5v1q0 .2.15.35T17 14q.2 0 .35-.15t.15-.35v-1h1q.2 0 .35-.15T19 12q0-.2-.15-.35t-.35-.15h-1v-1q0-.2-.15-.35T17 10q-.2 0-.35.15t-.15.35v1h-1q-.2 0-.35.15T15 12q0 .2.15.35t.35.15zm-4 .25l1.55 1.975q.05.075.55.275q.425 0 .625-.387t-.075-.738L13.75 12l1.425-1.9q.275-.35.075-.725T14.6 9q-.175 0-.312.075t-.238.2L12.5 11.25v-1.5q0-.325-.213-.538T11.75 9q-.325 0-.537.213T11 9.75v4.5q0 .325.213.538t.537.212q.325 0 .538-.213t.212-.537zm-5 .75v-1H9q.425 0 .713-.288T10 11.5V10q0-.425-.288-.712T9 9H6.75q-.325 0-.537.213T6 9.75q0 .325.213.538t.537.212H8.5v1H7q-.425 0-.712.288T6 12.5v1.75q0 .325.213.538T6.75 15h2.5q.325 0 .538-.213T10 14.25q0-.325-.213-.537T9.25 13.5zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21z"
|
||||
/>
|
||||
</svg>
|
||||
</iconify-icon>
|
||||
</p>
|
||||
|
||||
<h2>Scale icon</h2>
|
||||
<p>Using height="none" and CSS, animating width/height and color</p>
|
||||
<div class="unset-size">
|
||||
|
||||
@ -2,7 +2,10 @@
|
||||
"name": "iconify-icon",
|
||||
"description": "Icon web component that loads icon data on demand. Over 150,000 icons to choose from",
|
||||
"author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)",
|
||||
"version": "1.0.8",
|
||||
"version": "1.1.0-beta.1",
|
||||
"publishConfig": {
|
||||
"tag": "next"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "./dist/iconify-icon.cjs",
|
||||
"types": "./dist/iconify-icon.d.ts",
|
||||
|
||||
@ -103,7 +103,10 @@ export function defineIconifyIcon(
|
||||
// Root
|
||||
_shadowRoot: ShadowRoot;
|
||||
|
||||
// State
|
||||
// Initialised
|
||||
_initialised = false;
|
||||
|
||||
// Icon state
|
||||
_state: IconState;
|
||||
|
||||
// Attributes check queued
|
||||
@ -115,27 +118,76 @@ export function defineIconifyIcon(
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
// Attach shadow DOM
|
||||
const root = (this._shadowRoot = this.attachShadow({
|
||||
mode: 'open',
|
||||
}));
|
||||
// Render old content if no icon attribute is set
|
||||
if (!this.getAttribute('icon')) {
|
||||
try {
|
||||
if (document.readyState == 'complete') {
|
||||
// DOM already loaded
|
||||
const html = this.innerHTML;
|
||||
if (html) {
|
||||
this._createShadowRoot().innerHTML = html;
|
||||
}
|
||||
} else {
|
||||
// Do it when DOM is loaded
|
||||
window.onload = () => {
|
||||
if (!this.getAttribute('icon')) {
|
||||
const html = this.innerHTML;
|
||||
if (html) {
|
||||
this._createShadowRoot().innerHTML = html;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
} catch (err) {
|
||||
//
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Add style
|
||||
const inline = getInline(this);
|
||||
updateStyle(root, inline);
|
||||
|
||||
// Create empty state
|
||||
this._state = setPendingState(
|
||||
{
|
||||
value: '',
|
||||
},
|
||||
inline
|
||||
);
|
||||
// Init DOM
|
||||
this._init();
|
||||
|
||||
// Queue icon render
|
||||
this._queueCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Create shadow root
|
||||
*/
|
||||
_createShadowRoot() {
|
||||
// Attach shadow DOM
|
||||
if (!this._shadowRoot) {
|
||||
this._shadowRoot = this.attachShadow({
|
||||
mode: 'open',
|
||||
});
|
||||
}
|
||||
return this._shadowRoot;
|
||||
}
|
||||
|
||||
/**
|
||||
* Init state
|
||||
*/
|
||||
_init() {
|
||||
if (!this._initialised) {
|
||||
this._initialised = true;
|
||||
|
||||
// Create root
|
||||
const root = this._createShadowRoot();
|
||||
|
||||
// Add style
|
||||
const inline = getInline(this);
|
||||
updateStyle(root, inline);
|
||||
|
||||
// Create empty state
|
||||
this._state = setPendingState(
|
||||
{
|
||||
value: '',
|
||||
},
|
||||
inline
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Observed attributes
|
||||
*/
|
||||
@ -165,6 +217,8 @@ export function defineIconifyIcon(
|
||||
* Attribute has changed
|
||||
*/
|
||||
attributeChangedCallback(name: string) {
|
||||
this._init();
|
||||
|
||||
if (name === 'inline') {
|
||||
// Update immediately: not affected by other attributes
|
||||
const newInline = getInline(this);
|
||||
@ -221,6 +275,8 @@ export function defineIconifyIcon(
|
||||
* Restart animation
|
||||
*/
|
||||
restartAnimation() {
|
||||
this._init();
|
||||
|
||||
const state = this._state;
|
||||
if (state.rendered) {
|
||||
const root = this._shadowRoot;
|
||||
@ -241,6 +297,7 @@ export function defineIconifyIcon(
|
||||
* Get status
|
||||
*/
|
||||
get status(): IconifyIconStatus {
|
||||
this._init();
|
||||
const state = this._state;
|
||||
return state.rendered
|
||||
? 'rendered'
|
||||
|
||||
@ -16,6 +16,11 @@ import type { IconifyBuilderFunctions } from '@iconify/core/lib/builder/function
|
||||
import { iconToSVG as buildIcon } from '@iconify/utils/lib/svg/build';
|
||||
import { calculateSize } from '@iconify/utils/lib/svg/size';
|
||||
|
||||
// Custom additions used for building icons that are used by component
|
||||
// Can be reused for building icons in SSR and assigning it as content of component
|
||||
import { iconToHTML } from '@iconify/utils/lib/svg/html';
|
||||
import { svgToURL } from '@iconify/utils/lib/svg/url';
|
||||
|
||||
// API
|
||||
import type {
|
||||
IconifyAPIFunctions,
|
||||
@ -58,6 +63,10 @@ export interface IconifyExportedFunctions
|
||||
|
||||
// Append custom style to all components
|
||||
appendCustomStyle: (value: string) => void;
|
||||
|
||||
// Render HTML
|
||||
iconToHTML: typeof iconToHTML;
|
||||
svgToURL: typeof svgToURL;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -167,6 +176,8 @@ export function exportFunctions(): IconifyExportedFunctions {
|
||||
addCollection,
|
||||
calculateSize,
|
||||
buildIcon,
|
||||
iconToHTML,
|
||||
svgToURL,
|
||||
loadIcons,
|
||||
loadIcon,
|
||||
addAPIProvider,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user