SVG is the modern standard:
Only consider icon fonts for legacy IE11 support.
Decorative icons (next to visible text):
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save
</button>
Informative icons (standalone, no label):
<button aria-label="Save document">
<svg aria-hidden="true" focusable="false">...</svg>
</button>
<!-- Or with visually hidden text -->
<button>
<svg aria-hidden="true">...</svg>
<span class="sr-only">Save document</span>
</button>
SVG with accessible name:
<svg role="img" aria-labelledby="icon-title">
<title id="icon-title">Warning: system error</title>
<!-- paths -->
</svg>
Key rules:
aria-hidden="true" on SVGs that duplicate visible textfocusable="false" prevents unwanted tab stops in IE/Edge</code> must be first child inside <code><svg></code> for screen reader support</li><li>IDs must be unique if multiple SVGs are inline</li></ul><h2>Color Inheritance</h2><pre><code><svg fill="currentColor">
<path d="..."/>
</svg>
</code></pre><p><code>currentColor</code> inherits from CSS <code>color</code> property. The icon changes color with hover states automatically:</p><pre><code>.button { color: blue; }
.button:hover { color: red; } /* icon turns red too */
</code></pre><p>Remove hardcoded <code>fill="#000"</code> from SVGs before using currentColor.</p><p>For stroke-based icons, use <code>stroke="currentColor"</code> instead.</p><h2>Sizing</h2><p>Standard grid sizes: 16, 20, 24, 32px</p><p>Match stroke weight to size:</p><table><thead><tr><th>Size</th><th>Stroke</th><th>Use case</th></tr></thead><tbody><tr><td>------</td><td>--------</td><td>----------</td></tr><tr><td>16px</td><td>1px</td><td>Dense layouts, small text</td></tr><tr><td>20px</td><td>1.25px</td><td>Default UI</td></tr><tr><td>24px</td><td>1.5px</td><td>Buttons, primary actions</td></tr><tr><td>32px</td><td>2px</td><td>Headers, navigation</td></tr></tbody></table><p>Touch targets need 44x44px minimum—icon can be smaller if tappable area is larger via padding.</p><pre><code>.icon-button {
width: 24px;
height: 24px;
padding: 10px; /* Creates 44x44 touch target */
}
</code></pre><h2>Scaling with Text</h2><pre><code>.icon {
width: 1em;
height: 1em;
}
</code></pre><p>Icon scales with surrounding text size automatically.</p><h2>Symbol Sprites</h2><p>For many repeated icons, reduce DOM nodes with sprites:</p><pre><code><!-- Define once, hidden -->
<svg style="display:none">
<symbol id="icon-search" viewBox="0 0 24 24">
<path d="..."/>
</symbol>
<symbol id="icon-menu" viewBox="0 0 24 24">
<path d="..."/>
</symbol>
</svg>
<!-- Use anywhere -->
<svg aria-hidden="true"><use href="#icon-search"/></svg>
</code></pre><p>External sprites (<code><use href="/icons.svg#search"/></code>) don't work in older Safari without polyfill.</p><h2>Performance</h2><p>Benchmark (1000 icons):</p><ul><li><code><img></code> with data URI: 67ms (fastest)</li><li>Inline SVG optimized: 75ms</li><li>Symbol sprite: 99ms</li><li><code><img></code> external: 76ms</li></ul><p>Recommendations:</p><ul><li>Tree-shake icon libraries (Lucide, Heroicons support this)</li><li>Don't import entire Font Awesome (1MB+)—use subset or switch to SVG</li><li>Inline critical icons, lazy-load sprite for non-critical</li></ul><h2>Consistency</h2><ul><li>Stick to one icon set—mixing styles looks unprofessional</li><li>Match icon stroke weight to your font weight (regular text = 1.5px stroke)</li><li>Pick one style per context: outlined for inactive, filled for active</li><li>Optical alignment differs from mathematical—circles reach edges, squares don't</li><li>Name icons by appearance, not meaning: <code>stopwatch</code> not <code>speed</code></li></ul><h2>Common Mistakes</h2><ul><li>Missing <code>aria-hidden</code> on decorative icons—screen readers announce gibberish</li><li>Mixing rounded and sharp icon styles in same interface</li><li>Giant icon libraries for 10 icons—massive bundle bloat</li><li>Icon-only buttons without accessible name—impossible to use with screen readers</li><li>Hardcoded colors preventing theme switching</li><li>Stroke width not scaling with icon size—16px icon with 2px stroke looks heavy</li></ul></div>
</div>
</div>
<div id="tab-versions" class="detail-content">
<div class="detail-section">
<h2>版本历史</h2>
<p style="margin-bottom:12px;font-size:14px;color:#94a3b8;">共 1 个版本</p>
<ul class="version-list">
<li>
<div>
<span class="version-tag">v1.0.0</span>
<span style="font-size:11px;color:#5b6abf;margin-left:8px;background:#eef0ff;padding:1px 8px;border-radius:10px;">当前</span> </div>
<div style="font-size:12px;color:#94a3b8;">
2026-03-29 02:02 安全 安全 </div>
</li>
</ul>
</div>
</div>
<div id="tab-security" class="detail-content">
<div class="detail-section">
<h2>安全检测</h2>
<div class="sec-grid"> <div class="sec-card">
<h4>腾讯云安全 (Keen)</h4>
<div class="sec-status sec-safe">
安全，无风险 </div>
<a href="https://tix.qq.com/search/skill?keyword=54d818e7e05ef97e4849afb6247cea69" target="_blank">查看报告</a> </div>
<div class="sec-card">
<h4>腾讯云安全 (Sanbu)</h4>
<div class="sec-status sec-safe">
安全，无风险 </div>
<a href="https://static.cloudsec.tencent.com/html-report-v2/2026/05/25/395596_7cfba1ffc437879d503079561bc48e5f.html?q-sign-algorithm=sha1&q-ak=AKID8JMG1bzBC1dz96qNhssfFftujT1NCoFi&q-sign-time=1781385848%3B1812921848&q-key-time=1781385848%3B1812921848&q-header-list=host&q-url-param-list=&q-signature=fdb00e1774f256bdbf6992d25831648b2f042b4b" target="_blank">查看报告</a> </div>
</div>
</div>
</div>
<!-- Recommended Skills -->
<div style="margin-top:24px;">
<h2 style="font-size:18px;font-weight:600;margin-bottom:16px;">🔗 相关推荐</h2>
<div class="rec-grid">
<div class="rec-card">
<span class="badge-cat" style="margin-bottom:8px;display:inline-block;">productivity</span>
<h3><a href="/s/word-docx">Word / DOCX</a></h3>
<div class="rec-owner">ivangdavila</div> <div class="rec-desc">创建、检查和编辑 Microsoft Word 文档及 DOCX 文件，支持样式、编号、修订记录、表格、分节符及兼容性检查等功能。</div>
<div class="rec-stats">
<span style="color:#f39c12;">★ 440</span>
<span style="color:#5b6abf;">📥 147,877</span>
</div>
</div>
<div class="rec-card">
<span class="badge-cat" style="margin-bottom:8px;display:inline-block;">productivity</span>
<h3><a href="/s/baidu-search">Baidu web search</a></h3>
<div class="rec-owner">ide-rea</div> <div class="rec-desc">使用百度AI搜索引擎(BDSE)进行网络搜索。适用于获取实时信息、文档资料或研究课题。</div>
<div class="rec-stats">
<span style="color:#f39c12;">★ 237</span>
<span style="color:#5b6abf;">📥 105,649</span>
</div>
</div>
<div class="rec-card">
<span class="badge-cat" style="margin-bottom:8px;display:inline-block;">productivity</span>
<h3><a href="/s/weather">Weather</a></h3>
<div class="rec-owner">steipete</div> <div class="rec-desc">获取当前天气和预报（无需API密钥）</div>
<div class="rec-stats">
<span style="color:#f39c12;">★ 446</span>
<span style="color:#5b6abf;">📥 226,379</span>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded',function(){
document.querySelectorAll('.detail-tab').forEach(function(btn){
btn.addEventListener('click',function(e){
var tab = this.getAttribute('data-tab');
document.querySelectorAll('.detail-tab').forEach(function(b){b.classList.remove('active')});
document.querySelectorAll('.detail-content').forEach(function(c){c.classList.remove('active')});
this.classList.add('active');
var el = document.getElementById('tab-'+tab);
if(el) el.classList.add('active');
});
});
});
</script>
<div class="footer">
<p>Skill工具集 © 2026</p>
</div></body>
</html>