Question

最近我决定从字体图标切换到SVG图标。我使用Illustrator绘制SVG并使用以下设置导出画板（包含单个图标）：

样式：内联样式
字体：SVG
图片：嵌入
对象ID：图层名称
十进制：2

我使用Icomoon app生成SVG图标。但问题是，所有的SVG都有内嵌的填充，描边或样式属性。我无法使用CSS更新图标颜色，而SVG中存在这些样式。

我错过了什么吗？ Illustrator中是否有一个选项可以在没有填充/描边/样式属性的情况下保存SVG？或者我是否必须使用Remove SVG Properties之类的内容删除属性？

如果Remove SVG Properties是要走的路，有人可以告诉我如何在我的Angular CLI项目中使用它吗？我对此很陌生。

Answer 1

是的，你可以。

只需在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
-->

Answer 2

您可以使用在线工具这是自动转换内联样式。使用这个Android开发人员 http://inloop.github.io/svg2android/

用SVG图标替换字体图标 - 删除内联样式

2 个答案: