最近我决定从字体图标切换到 SVG 图标。我使用 Illustrator 绘制我的 SVG，并使用以下设置导出画板(包含一个单独的图标):
- 样式:内联样式
- 字体:SVG
- 图片:嵌入
- 对象 ID:图层名称
- 十进制:2
我使用了 Icomoon app生成 SVG 图标。但问题是，所有的 SVG 都有一个内联的填充、描边或样式属性。当这些样式存在于 SVG 中时，我无法使用 CSS 更新图标颜色。
我错过了什么吗？ Illustrator 中是否有一个选项可以在没有填充/描边/样式属性的情况下保存 SVG？或者我必须使用类似 Remove SVG Properties 的东西吗？删除属性？
如果Remove SVG Properties是要走的路，有人能告诉我如何在我的 Angular CLI 元素中使用它吗？我对此很陌生。
最佳答案
是的，你可以。
只需在 CSS 中选择 svg 然后应用:
selector {
fill: red;
stroke: blue;
/* etc */
}
这对我来说似乎工作得很好。
可选地，如果需要，添加 !important。
更新内联 CSS 的另一件事是通过 jQuery，使用 .css() 方法。
从那个地方使用免费图标的一种方法是 ( link ):
.lnr-home {
color: red;
font-size: 40px;
/* To get crisp results, use sizes that are
a multiple of 20; because Linearicons was
designed on a 20 by 20 grid. */
}
body {
font-size: 40px;
font-family: sans-serif;
color: #red;
}<!-- Add the following <link> to the <head> of your HTML. -->
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<!-- To insert the icon: -->
<span class="lnr lnr-home"></span> lnr-home
<!--
Cheat Sheet:
https://linearicons.com/free#cheatsheet
-->关于css - 用 SVG 图标替换字体图标 - 删除内联样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46363418/