1、demo 测试效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="iconfont.js"></script>
<style>
.svg-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>
</head>
<body>
<svg class="svg-icon" aria-hidden="false">
<use xlink:href="#icon-q-flash"></use>
</svg>
</body>
</html>
2、在vue项目中引用
2.1 引入iconfont文件下面生成的 symbol 代码 iconfont.js
//html 引入 iconfont.js 放入public 文件夹下面
<script src="iconfont.js"></script>
//main.js 引入
import "@/assets/iconfont.js"
引入成功后会生成svg文件
svg
2.2 引入svg icon 的样式
.svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
height: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
.custom-icon{
width: 40px !important;
height: 40px !important;
}
2.3挑选相应图标并获取类名，应用于页面
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
网友评论