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



最近我决定从字体图标切换到SVG图标。我使用Illustrator绘制我的SVG,并用以下设置导出了艺术板(包含单个图标):

  • 样式:内联风格
  • 字体:SVG
  • 图像:嵌入
  • 对象IDS:图层名称
  • 小数:2

我使用Icomoon应用程序生成SVG图标。不过,问题是,所有SVG都在任何地方都有填充,中风或样式的属性。当这些样式在SVG中时,我无法使用CSS更新图标颜色。

我想念什么吗?Illustrator中是否可以选择保存SVG,而没有填充/中风/样式属性?还是我必须使用删除SVG属性之类的东西来删除属性?

如果删除SVG属性是要走的方式,有人可以告诉我如何在Angular CLI项目中使用它吗?我非常陌生。

是的,你可以。

只需在CSS中选择SVG,然后应用:

selector {
    fill: red;
    stroke: blue;
    /* etc */
}

似乎对我有用。

可选,如果需要,请添加!important

您可以使用.css()方法。

使用该位置免费图标的一种方法是(链接):

.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
-->

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

最新更新