@charcoal-ui/icons 5.0.0-beta.1 → 5.0.0-beta.3

package/dist/index.cjs

@@ -0,0 +1,318 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+let __charcoal_ui_icon_files = require("@charcoal-ui/icon-files");
+__charcoal_ui_icon_files = __toESM(__charcoal_ui_icon_files);
+
+//#region src/charcoalIconFiles.ts
+var charcoalIconFiles_default = __charcoal_ui_icon_files.default;
+const KNOWN_ICON_FILES = Object.keys(__charcoal_ui_icon_files.default);
+function isKnownIconFile(name) {
+	return name in __charcoal_ui_icon_files.default;
+}
+
+//#endregion
+//#region src/loaders/PixivIconLoadError.ts
+var PixivIconLoadError = class extends Error {
+	constructor(name, cause) {
+		const message = formatMessage(name, cause);
+		super(message, { cause });
+		this.name = "PixivIconLoadError";
+		Object.setPrototypeOf(this, new.target.prototype);
+	}
+};
+function formatMessage(name, cause) {
+	const message = `Failed to fetch <pixiv-icon name="${name}">`;
+	if (cause == null) return message;
+	if (cause instanceof Error) return `${message}: ${cause.toString()})`;
+	return `${message}: ${JSON.stringify(cause)})`;
+}
+
+//#endregion
+//#region src/loaders/CharcoalIconFilesLoader.ts
+/**
+* `@charcoal-ui/icon-files` に収録されているアイコンを取ってくる
+*/
+var CharcoalIconFilesLoader = class {
+	_name;
+	_resultSvg = void 0;
+	_promise = void 0;
+	constructor(name) {
+		this._name = name;
+	}
+	get importIconFile() {
+		return charcoalIconFiles_default[this._name];
+	}
+	async fetch() {
+		if (this._resultSvg !== void 0) return this._resultSvg;
+		if (this._promise) return this._promise;
+		this._promise = this.importIconFile().then((svg) => {
+			this._resultSvg = svg;
+			return this._resultSvg;
+		}).catch((e) => {
+			throw new PixivIconLoadError(this._name, e);
+		}).finally(() => {
+			this._promise = void 0;
+		});
+		return this._promise;
+	}
+};
+
+//#endregion
+//#region src/loaders/CustomRawFileLoader.ts
+var CustomRawFileLoader = class CustomRawFileLoader extends CharcoalIconFilesLoader {
+	/**
+	* icons-filesと同じ型のアイコンをしまっとくところ
+	*/
+	static filePackages = /* @__PURE__ */ new Map();
+	get importIconFile() {
+		const icon = CustomRawFileLoader.filePackages.get(this._name);
+		if (icon !== void 0) return icon;
+		throw new Error("Custom icon file was not found");
+	}
+};
+function addRawFile(name, importFn) {
+	CustomRawFileLoader.filePackages.set(name, importFn);
+}
+/**
+* 登録されているfile packagesにiconがあればtrue
+*/
+function isKnownRawIconFile(name) {
+	return CustomRawFileLoader.filePackages.has(name);
+}
+
+//#endregion
+//#region src/loaders/CustomIconLoader.ts
+/**
+* `PixivIcon.extend()` で登録されたカスタムのアイコンを取得する
+*/
+var CustomIconLoader = class {
+	_name;
+	_filePathOrUrl;
+	_resultSvg = void 0;
+	_promise = void 0;
+	constructor(name, filePathOrUrl) {
+		this._name = name;
+		this._filePathOrUrl = filePathOrUrl;
+	}
+	async fetch() {
+		if (this._resultSvg !== void 0) return this._resultSvg;
+		if (this._promise) return this._promise;
+		this._promise = fetch(this._filePathOrUrl).then((response) => {
+			if (!response.ok) throw new PixivIconLoadError(this._name, "Response is not ok");
+			return response.text();
+		}).then((svg) => {
+			this._resultSvg = svg;
+			return this._resultSvg;
+		}).catch((e) => {
+			if (e instanceof PixivIconLoadError) throw e;
+			throw new PixivIconLoadError(this._name, e);
+		}).finally(() => {
+			this._promise = void 0;
+		});
+		return this._promise;
+	}
+};
+
+//#endregion
+//#region src/loaders/index.ts
+/**
+* icon をロードするオブジェクトのプール。Loader のインスタンスは作り次第ここに入れる
+*
+* 同じアイコンへの複数回のリクエストが起きないためには、Loader がこの中でユニークでないと行けない
+*/
+const loaders = /* @__PURE__ */ new Map();
+function addCustomIcon(name, filePathOrUrl) {
+	loaders.set(name, new CustomIconLoader(name, filePathOrUrl));
+}
+async function getIcon(name) {
+	const loader = resolveIconLoader(name);
+	if (loader == null) throw new PixivIconLoadError(name, "Loader was not found");
+	try {
+		const svg = await loader.fetch();
+		if (typeof svg !== "string") console.warn(`${name}: Expected load result to be a string, but received an unexpected type.`);
+		return svg;
+	} catch (e) {
+		if (e instanceof PixivIconLoadError) throw e;
+		throw new PixivIconLoadError(name, e);
+	}
+}
+function resolveIconLoader(name) {
+	const registeredLoader = loaders.get(name);
+	if (registeredLoader) return registeredLoader;
+	if (isKnownRawIconFile(name)) {
+		const customFilePackageLoader = new CustomRawFileLoader(name);
+		loaders.set(name, customFilePackageLoader);
+		return customFilePackageLoader;
+	}
+	if (isKnownIconFile(name)) {
+		const charcoalIconFilesLoader = new CharcoalIconFilesLoader(name);
+		loaders.set(name, charcoalIconFilesLoader);
+		return charcoalIconFilesLoader;
+	}
+	return null;
+}
+
+//#endregion
+//#region src/ssr.ts
+const __SERVER__ = typeof window === "undefined";
+if (__SERVER__ || !(typeof HTMLElement !== "undefined")) globalThis.HTMLElement = class {};
+
+//#endregion
+//#region src/PixivIcon.ts
+const attributes = [
+	"name",
+	"scale",
+	"unsafe-non-guideline-scale"
+];
+const ROOT_MARGIN = 50;
+var PixivIcon = class extends HTMLElement {
+	static tagName = "pixiv-icon";
+	/**
+	* NOTE: icon content should be sanitized before pass to extend()
+	*
+	* XSSに注意すること。
+	* 登録したファイルの中身が直接domに反映されるため、XSSに繋がる可能性があります。
+	* 信用していないソースからアイコンを追加する場合dom-purifyなどを経由してください。
+	*/
+	static extend(map) {
+		if (__SERVER__) return;
+		Object.entries(map).forEach(([name, filePathOrUrlOrImportFn]) => {
+			if (!name.includes("/")) throw new TypeError(`${name} is not a valid icon name. "name" must be named like [size]/[Name].`);
+			if (typeof filePathOrUrlOrImportFn === "string") addCustomIcon(name, filePathOrUrlOrImportFn);
+			if (typeof filePathOrUrlOrImportFn === "function") addRawFile(name, filePathOrUrlOrImportFn);
+		});
+	}
+	static get observedAttributes() {
+		return attributes;
+	}
+	svgContent;
+	observer;
+	isVisible = false;
+	get props() {
+		const partial = Object.fromEntries(attributes.map((attribute) => [attribute, this.getAttribute(attribute)]));
+		const name = partial.name;
+		if (name === null) throw new TypeError("property \"name\" is required.");
+		if (!name.includes("/")) throw new TypeError(`${name} is not a valid icon name. "name" must be named like [size]/[Name].`);
+		return {
+			...partial,
+			name
+		};
+	}
+	get forceResizedSize() {
+		if (this.props["unsafe-non-guideline-scale"] === null) return null;
+		const [size] = this.props.name.split("/");
+		const scale = Number(this.props["unsafe-non-guideline-scale"]);
+		switch (size) {
+			case "Inline": return 16 * scale;
+			default: return Number(size) * scale;
+		}
+	}
+	get scaledSize() {
+		const [size] = this.props.name.split("/");
+		const scale = Number(this.props.scale ?? "1");
+		switch (size) {
+			case "Inline": switch (scale) {
+				case 2: return 32;
+				default: return 16;
+			}
+			case "24": return Number(size) * scale;
+			default: return Number(size);
+		}
+	}
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+	}
+	async connectedCallback() {
+		this.render();
+		await this.waitUntilVisible();
+		this.isVisible = true;
+		await this.loadSvg(this.props.name);
+	}
+	disconnectedCallback() {
+		this.observer?.disconnect();
+		this.observer = void 0;
+		this.isVisible = false;
+	}
+	attributeChangedCallback(attr, _oldValue, newValue) {
+		if (!this.isVisible) return;
+		if (attr === "name") {
+			this.loadSvg(newValue);
+			return;
+		}
+		if (this.svgContent !== void 0) {
+			this.render();
+			return;
+		}
+		this.loadSvg(this.props.name);
+	}
+	render() {
+		const size = this.forceResizedSize ?? this.scaledSize;
+		if (!Number.isFinite(size)) throw new TypeError(`icon size must not be NaN`);
+		const style = `<style>
+  :host {
+    display: inline-flex;
+    --size: ${size}px;
+  }
+
+  svg {
+    width: var(--size);
+    height: var(--size);
+  }
+</style>`;
+		const svg = this.svgContent !== void 0 ? this.svgContent : `<svg viewBox="0 0 ${size} ${size}"></svg>`;
+		this.shadowRoot.innerHTML = style + svg;
+	}
+	async loadSvg(name) {
+		this.svgContent = await getIcon(name);
+		this.render();
+	}
+	waitUntilVisible() {
+		return new Promise((resolve) => {
+			this.observer = new IntersectionObserver((entries) => {
+				if (entries.some((entry) => entry.isIntersecting)) {
+					this.observer?.disconnect();
+					this.observer = void 0;
+					resolve();
+				}
+			}, { rootMargin: `${ROOT_MARGIN}px` });
+			this.observer.observe(this);
+		});
+	}
+};
+
+//#endregion
+//#region src/index.ts
+if (!__SERVER__) {
+	if (!window.customElements.get(PixivIcon.tagName)) {
+		window.PixivIcon = PixivIcon;
+		window.customElements.define(PixivIcon.tagName, PixivIcon);
+	}
+}
+
+//#endregion
+exports.KNOWN_ICON_FILES = KNOWN_ICON_FILES;
+exports.PixivIcon = PixivIcon;
+exports.PixivIconLoadError = PixivIconLoadError;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["charcoalIconFiles","charcoalIconFiles","__SERVER__: boolean"],"sources":["../src/charcoalIconFiles.ts","../src/loaders/PixivIconLoadError.ts","../src/loaders/CharcoalIconFilesLoader.ts","../src/loaders/CustomRawFileLoader.ts","../src/loaders/CustomIconLoader.ts","../src/loaders/index.ts","../src/ssr.ts","../src/PixivIcon.ts","../src/index.ts"],"sourcesContent":["import charcoalIconFiles from '@charcoal-ui/icon-files'\nimport type charcoalIconFilesV2 from '@charcoal-ui/icon-files/v2'\n\nexport default charcoalIconFiles\nexport type KnownIconFile = keyof typeof charcoalIconFiles\nexport type KnownIconFileV2 = keyof typeof charcoalIconFilesV2\nexport const KNOWN_ICON_FILES = Object.keys(\n  charcoalIconFiles\n) as KnownIconFile[]\n\nexport function isKnownIconFile(name: string): name is KnownIconFile {\n  return name in charcoalIconFiles\n}\n","export class PixivIconLoadError extends Error {\n  constructor(name: string, cause: unknown) {\n    const message = formatMessage(name, cause)\n\n    super(message, { cause })\n    this.name = 'PixivIconLoadError'\n    Object.setPrototypeOf(this, new.target.prototype)\n  }\n}\n\nfunction formatMessage(name: string, cause: unknown) {\n  const message = `Failed to fetch <pixiv-icon name=\"${name}\">`\n  if (cause == null) {\n    return message\n  }\n\n  if (cause instanceof Error) {\n    return `${message}: ${cause.toString()})`\n  }\n\n  return `${message}: ${JSON.stringify(cause)})`\n}\n","import { PixivIconLoadError } from './PixivIconLoadError'\nimport { Loadable } from './Loadable'\nimport charcoalIconFiles, { KnownIconFile } from '../charcoalIconFiles'\n\n/**\n * `@charcoal-ui/icon-files` に収録されているアイコンを取ってくる\n */\nexport class CharcoalIconFilesLoader implements Loadable {\n  protected _name: KnownIconFile\n  private _resultSvg: string | undefined = undefined\n  private _promise: Promise<string> | undefined = undefined\n\n  constructor(name: KnownIconFile) {\n    this._name = name\n  }\n\n  get importIconFile(): () => Promise<string> {\n    return charcoalIconFiles[this._name]\n  }\n\n  async fetch(): Promise<string> {\n    if (this._resultSvg !== undefined) {\n      return this._resultSvg\n    }\n\n    if (this._promise) {\n      return this._promise\n    }\n\n    this._promise = this.importIconFile()\n      .then((svg) => {\n        this._resultSvg = svg\n        return this._resultSvg\n      })\n      .catch((e) => {\n        throw new PixivIconLoadError(this._name, e)\n      })\n      .finally(() => {\n        this._promise = undefined\n      })\n\n    return this._promise\n  }\n}\n","import { KnownIconFile } from '../charcoalIconFiles'\nimport { CharcoalIconFilesLoader } from './CharcoalIconFilesLoader'\n\nexport class CustomRawFileLoader extends CharcoalIconFilesLoader {\n  /**\n   * icons-filesと同じ型のアイコンをしまっとくところ\n   */\n  static filePackages: Map<string, () => Promise<string>> = new Map()\n\n  get importIconFile(): () => Promise<string> {\n    const icon = CustomRawFileLoader.filePackages.get(this._name)\n    if (icon !== undefined) return icon\n\n    throw new Error('Custom icon file was not found')\n  }\n}\n\nexport function addRawFile(\n  name: string,\n  importFn: () => Promise<string>\n): void {\n  CustomRawFileLoader.filePackages.set(name, importFn)\n}\n\n/**\n * 登録されているfile packagesにiconがあればtrue\n */\nexport function isKnownRawIconFile(name: string): name is KnownIconFile {\n  return CustomRawFileLoader.filePackages.has(name)\n}\n","import { PixivIconLoadError } from './PixivIconLoadError'\nimport { Loadable } from './Loadable'\n\n/**\n * `PixivIcon.extend()` で登録されたカスタムのアイコンを取得する\n */\nexport class CustomIconLoader implements Loadable {\n  private _name: string\n  private _filePathOrUrl: string\n  private _resultSvg: string | undefined = undefined\n  private _promise: Promise<string> | undefined = undefined\n\n  constructor(name: string, filePathOrUrl: string) {\n    this._name = name\n    this._filePathOrUrl = filePathOrUrl\n  }\n\n  async fetch(): Promise<string> {\n    if (this._resultSvg !== undefined) {\n      return this._resultSvg\n    }\n\n    if (this._promise) {\n      return this._promise\n    }\n\n    this._promise = fetch(this._filePathOrUrl)\n      .then((response) => {\n        if (!response.ok) {\n          throw new PixivIconLoadError(this._name, 'Response is not ok')\n        }\n\n        return response.text()\n      })\n      .then((svg) => {\n        this._resultSvg = svg\n        return this._resultSvg\n      })\n      .catch((e) => {\n        if (e instanceof PixivIconLoadError) {\n          throw e\n        }\n        throw new PixivIconLoadError(this._name, e)\n      })\n      .finally(() => {\n        this._promise = undefined\n      })\n\n    return this._promise\n  }\n}\n","import { isKnownIconFile } from '../charcoalIconFiles'\nimport { CharcoalIconFilesLoader } from './CharcoalIconFilesLoader'\nimport { CustomRawFileLoader, isKnownRawIconFile } from './CustomRawFileLoader'\nimport { CustomIconLoader } from './CustomIconLoader'\nimport { Loadable } from './Loadable'\nimport { PixivIconLoadError } from './PixivIconLoadError'\n\n/**\n * icon をロードするオブジェクトのプール。Loader のインスタンスは作り次第ここに入れる\n *\n * 同じアイコンへの複数回のリクエストが起きないためには、Loader がこの中でユニークでないと行けない\n */\nconst loaders = new Map<string, Loadable>()\n\nexport function addCustomIcon(name: string, filePathOrUrl: string): void {\n  loaders.set(name, new CustomIconLoader(name, filePathOrUrl))\n}\n\nexport async function getIcon(name: string): Promise<string> {\n  const loader = resolveIconLoader(name)\n  if (loader == null) {\n    throw new PixivIconLoadError(name, 'Loader was not found')\n  }\n\n  try {\n    const svg = await loader.fetch()\n    if (typeof svg !== 'string') {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `${name}: Expected load result to be a string, but received an unexpected type.`\n      )\n    }\n\n    return svg\n  } catch (e) {\n    if (e instanceof PixivIconLoadError) {\n      throw e\n    }\n    throw new PixivIconLoadError(name, e)\n  }\n}\n\nfunction resolveIconLoader(name: string) {\n  // 登録済み or キャッシュ済みの場合\n  // addCustomIcon で登録された CustomIconLoader は常にこっちを通る\n  const registeredLoader = loaders.get(name)\n  if (registeredLoader) {\n    return registeredLoader\n  }\n\n  // addRawFile で登録されたもの\n  if (isKnownRawIconFile(name)) {\n    const customFilePackageLoader = new CustomRawFileLoader(name)\n    loaders.set(name, customFilePackageLoader)\n    return customFilePackageLoader\n  }\n\n  if (isKnownIconFile(name)) {\n    // `@charcoal-ui/icon-files` に収録されているアイコンにはこれを返す\n    const charcoalIconFilesLoader = new CharcoalIconFilesLoader(name)\n    loaders.set(name, charcoalIconFilesLoader)\n    return charcoalIconFilesLoader\n  }\n\n  // 存在しないアイコンにはこれを返す\n  return null\n}\n","export const __SERVER__: boolean = typeof window === 'undefined'\n\nconst CAN_USE_DOM = typeof HTMLElement !== 'undefined'\n\n// Workaround: `extends HTMLElement` の形式でないとbabelのトランスパイルがおかしくなる\nif (__SERVER__ || !CAN_USE_DOM) {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  globalThis.HTMLElement = class {} as any\n}\n","import type React from 'react'\nimport { KnownIconFile } from './charcoalIconFiles'\nimport { getIcon, addCustomIcon } from './loaders'\nimport { addRawFile } from './loaders/CustomRawFileLoader'\nimport { __SERVER__ } from './ssr'\n\nconst attributes = ['name', 'scale', 'unsafe-non-guideline-scale'] as const\n\nconst ROOT_MARGIN = 50\n\nexport interface KnownIconType extends Record<KnownIconFile, unknown> {}\n\nexport interface Props\n  extends Omit<\n    React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,\n    'className' | 'css'\n  > {\n  name: keyof KnownIconType\n  scale?: 1 | 2 | 3 | '1' | '2' | '3'\n  'unsafe-non-guideline-scale'?: number | string\n\n  // CustomElements は className が使えない。class と書く必要がある\n  // https://ja.reactjs.org/docs/web-components.html#using-web-components-in-react\n  class?: string\n}\n\ntype ExtendedIconFile = Exclude<keyof KnownIconType, KnownIconFile>\ntype Extended = [ExtendedIconFile] extends [never] // NOTE: ExtendedIconFileがneverならKnownIconTypeは拡張されていない\n  ? false\n  : true\n\nexport class PixivIcon extends HTMLElement {\n  static readonly tagName = 'pixiv-icon'\n\n  /**\n   * NOTE: icon content should be sanitized before pass to extend()\n   *\n   * XSSに注意すること。\n   * 登録したファイルの中身が直接domに反映されるため、XSSに繋がる可能性があります。\n   * 信用していないソースからアイコンを追加する場合dom-purifyなどを経由してください。\n   */\n  static extend(\n    map: Extended extends true\n      ? Record<ExtendedIconFile, string | (() => Promise<string>)>\n      : Record<string, string | (() => Promise<string>)>\n  ): void {\n    if (__SERVER__) {\n      return\n    }\n\n    Object.entries(map).forEach(([name, filePathOrUrlOrImportFn]) => {\n      if (!name.includes('/')) {\n        throw new TypeError(\n          `${name} is not a valid icon name. \"name\" must be named like [size]/[Name].`\n        )\n      }\n\n      if (typeof filePathOrUrlOrImportFn === 'string') {\n        addCustomIcon(name, filePathOrUrlOrImportFn)\n      }\n\n      if (typeof filePathOrUrlOrImportFn === 'function') {\n        addRawFile(name, filePathOrUrlOrImportFn)\n      }\n    })\n  }\n\n  static get observedAttributes(): typeof attributes {\n    return attributes\n  }\n\n  private svgContent?: string\n  private observer?: IntersectionObserver\n  private isVisible = false\n\n  get props(): {\n    name: string\n    scale: string | null\n    'unsafe-non-guideline-scale': string | null\n  } {\n    const partial = Object.fromEntries(\n      attributes.map((attribute) => [attribute, this.getAttribute(attribute)])\n    ) as Record<(typeof attributes)[number], string | null>\n\n    const name = partial.name\n\n    if (name === null) {\n      throw new TypeError('property \"name\" is required.')\n    }\n\n    if (!name.includes('/')) {\n      throw new TypeError(\n        `${name} is not a valid icon name. \"name\" must be named like [size]/[Name].`\n      )\n    }\n\n    return {\n      ...partial,\n      name,\n    }\n  }\n\n  get forceResizedSize(): number | null {\n    if (this.props['unsafe-non-guideline-scale'] === null) {\n      return null\n    }\n\n    const [size] = this.props.name.split('/')\n    const scale = Number(this.props['unsafe-non-guideline-scale'])\n\n    switch (size) {\n      case 'Inline': {\n        return 16 * scale\n      }\n\n      default: {\n        return Number(size) * scale\n      }\n    }\n  }\n\n  get scaledSize(): number {\n    const [size] = this.props.name.split('/')\n\n    const scale = Number(this.props.scale ?? '1')\n\n    switch (size) {\n      case 'Inline': {\n        switch (scale) {\n          case 2: {\n            return 32\n          }\n\n          default: {\n            return 16\n          }\n        }\n      }\n\n      case '24': {\n        return Number(size) * scale\n      }\n\n      default: {\n        return Number(size)\n      }\n    }\n  }\n\n  constructor() {\n    super()\n    this.attachShadow({ mode: 'open' })\n  }\n\n  async connectedCallback(): Promise<void> {\n    this.render()\n    await this.waitUntilVisible()\n    this.isVisible = true\n    await this.loadSvg(this.props.name)\n  }\n\n  disconnectedCallback(): void {\n    this.observer?.disconnect()\n    this.observer = undefined\n    this.isVisible = false\n  }\n\n  attributeChangedCallback(\n    attr: string,\n    _oldValue: string | null,\n    newValue: string\n  ): void {\n    // 非表示の場合はロードしない\n    if (!this.isVisible) {\n      return\n    }\n\n    // name が変更された場合必ず再読み込みを試みる\n    if (attr === 'name') {\n      void this.loadSvg(newValue)\n      return\n    }\n\n    // SVG が読み込み済み && scale などの変更だけならそこだけ反映すればいい\n    if (this.svgContent !== undefined) {\n      this.render()\n      return\n    }\n\n    // まだ SVG が読み込めてないなら load\n    void this.loadSvg(this.props.name)\n  }\n\n  render(): void {\n    const size = this.forceResizedSize ?? this.scaledSize\n\n    if (!Number.isFinite(size)) {\n      throw new TypeError(`icon size must not be NaN`)\n    }\n\n    const style = `<style>\n  :host {\n    display: inline-flex;\n    --size: ${size}px;\n  }\n\n  svg {\n    width: var(--size);\n    height: var(--size);\n  }\n</style>`\n\n    const svg =\n      this.svgContent !== undefined\n        ? this.svgContent\n        : `<svg viewBox=\"0 0 ${size} ${size}\"></svg>`\n\n    // NOTE: User should sanitize the svg content before passing to charcoal.\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    this.shadowRoot!.innerHTML = style + svg\n  }\n\n  private async loadSvg(name: string) {\n    this.svgContent = await getIcon(name)\n    this.render()\n  }\n\n  private waitUntilVisible() {\n    return new Promise<void>((resolve) => {\n      this.observer = new IntersectionObserver(\n        (entries) => {\n          // In Chromium based browsers, multiple entries can be returned even only observe once.\n          // Here, we don't care about the entry time but only if isIntersecting happened.\n          const isIntersecting = entries.some((entry) => entry.isIntersecting)\n          if (isIntersecting) {\n            this.observer?.disconnect()\n            this.observer = undefined\n            resolve()\n          }\n        },\n        { rootMargin: `${ROOT_MARGIN}px` }\n      )\n\n      this.observer.observe(this)\n    })\n  }\n}\n","import { PixivIcon } from './PixivIcon'\nimport { __SERVER__ } from './ssr'\nexport { PixivIcon, type KnownIconType, type Props } from './PixivIcon'\nexport { KNOWN_ICON_FILES } from './charcoalIconFiles'\nexport { PixivIconLoadError } from './loaders/PixivIconLoadError'\n\ndeclare global {\n  interface Window {\n    PixivIcon: typeof PixivIcon\n  }\n}\n\ndeclare module 'react' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  export namespace JSX {\n    interface IntrinsicElements {\n      'pixiv-icon': import('./PixivIcon').Props\n    }\n  }\n}\n\nif (!__SERVER__) {\n  // TODO: HMR対応\n  if (!window.customElements.get(PixivIcon.tagName)) {\n    window.PixivIcon = PixivIcon\n    window.customElements.define(PixivIcon.tagName, PixivIcon)\n  }\n}\n"],"mappings":"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"}