内联SVG结合CSS可灵活控制图标颜色、大小和动画。通过设置fill: currentColor或CSS变量，配合em单位与transition，实现主题适配、响应式布局及悬停动效，提升交互体验且易于维护。
使用CSS来实现简单的SVG图标样式非常直接，关键在于把SVG内联到HTML中，然后通过CSS控制其颜色、大小、动画等视觉效果。下面介绍几种常见且实用的方法。
1. 内联SVG并用CSS设置颜色
将SVG代码直接写在HTML中，可以方便地用fill属性配合CSS类来控制图标的颜色。
示例：
<svg class="icon" width="24" height="24" viewBox="0 0 24 24"> <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" /> </svg>
CSS样式：
立即学习“前端免费学习笔记（深入）”；
.icon {
fill: currentColor; /* 使用文字颜色 */
width: 24px;
height: 24px;
}
.icon:hover {
fill: #007acc;
}
说明：使用
currentColor可以让SVG的填充色跟随文本颜色，便于统一主题配色。
2. 控制SVG大小与布局
通过CSS设置SVG的尺寸，避免在HTML中硬编码
width和
height。
建议使用相对单位如
em或
rem，使图标能随字体大小自适应。
.icon {
width: 1.5em;
height: 1.5em;
vertical-align: middle;
}
这样图标就能自然地与文字对齐，适合用在按钮或导航栏中。
3. 添加悬停与过渡效果
为SVG图标添加平滑的颜色变化或旋转动画，提升交互体验。
.icon {
fill: #666;
transition: fill 0.3s ease, transform 0.3s ease;
}
<p>.icon:hover {
fill: #000;
transform: scale(1.1);
}</p>支持
transform和
transition，可实现缩放、旋转等动效。
4. 使用CSS变量定制主题
结合CSS自定义属性，轻松实现多主题切换。
:root {
--icon-color: #555;
--icon-hover: #007acc;
}
<p>.icon {
fill: var(--icon-color);
transition: fill 0.3s;
}</p><p>.icon:hover {
fill: var(--icon-hover);
}</p>只需更改变量值，所有图标颜色自动更新。
基本上就这些。通过内联SVG + CSS，你可以完全控制图标的外观，无需依赖外部图片或字体图标，灵活又高效。关键是确保
fill可被CSS覆盖，优先使用
currentColor或
var()提升可维护性。
