50 lines
1.7 KiB
HTML
50 lines
1.7 KiB
HTML
<div>
|
||
<h1>icon</h1>
|
||
<hr />
|
||
<p>
|
||
创建一个 svg 矢量图标元素，或者解析转换页面上特定类型的 svg
|
||
标签到指定的图标元素。
|
||
</p>
|
||
<h2>createIcon</h2>
|
||
<code>function createIcon(type: string, id: string, style?: { [key: string]: string }): SVGElement</code>
|
||
<h3>type: string</h3>
|
||
<p>
|
||
图标类型，可选值目前有 <code>fa-regular</code>、<code>fa-light</code>、<code>fa-solid</code>
|
||
</p>
|
||
<h3>id: string</h3>
|
||
<p>
|
||
图形 id，例如
|
||
<code>user-edit</code>、<code>address-card</code>、<code>frog</code>……
|
||
</p>
|
||
<h3>style?: { [key: string]: string }</h3>
|
||
<p>
|
||
自定义样式的对象
|
||
</p>
|
||
<h2>resolveIcon</h2>
|
||
<code>function resolveIcon(container: HTMLElement): HTMLElement</code>
|
||
<h3>container: HTMLElement</h3>
|
||
<p>
|
||
将把此 HTML 元素下的所有 <code>svg[data-id]</code> 元素解析为图标，<code>[data-id]</code>
|
||
同上述 <code>id: string</code>，<code>[data-type]</code> 同上述
|
||
<code>type: string</code>
|
||
</p>
|
||
<hr />
|
||
<h2>示例</h2>
|
||
<pre><div id="icon-sample">
|
||
<svg data-id="address-card" data-type="fa-regular"></svg>
|
||
<svg data-id="user-edit" data-type="fa-light"></svg>
|
||
<svg data-id="frog" data-type="fa-solid"></svg>
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
window["lib-ui"].resolveIcon(document.querySelector("#icon-sample"));
|
||
</script></pre>
|
||
<div id="icon-sample">
|
||
<svg data-id="address-card" data-type="fa-regular"></svg>
|
||
<svg data-id="user-edit" data-type="fa-light"></svg>
|
||
<svg data-id="frog" data-type="fa-solid"></svg>
|
||
</div>
|
||
<script type="text/javascript">
|
||
window["lib-ui"].resolveIcon(document.querySelector("#icon-sample"));
|
||
</script>
|
||
</div> |