引用彩色图标

Posted 2020-11-08 qq3279338858

第一步：引入项目下面生成的symbol代码：

<script src="./iconfont.js"></script>

第二步：加入通用css代码（引入一次就行）：

<style type="text/css">
.icon {
   /* 通过设置 font-size 来改变图标大小 */
   width: 1em; height: 1em;
   /* 图标和文字相邻时，垂直对齐 */
   vertical-align: -0.15em;
   /* 通过设置 color 来改变 SVG 的颜色/fill */
   fill: currentColor;
   /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
   overflow: hidden;
}
</style>

第三步：挑选相应图标并获取类名，应用于页面：

<!--彩色图标设置颜色无效-->
<svg class="icon" aria-hidden="true" style="font-size: 50px;color: red;">
  <use xlink:href="#icon-xxx"></use>
</svg>