1.iconfont.cn中找到喜欢的图标添加至项目
2.找到项目选择Symbol选项
image.png
3.点击js在新窗口打开，全选复制
image.png
4.在uniapp项目新建svg.js，粘贴 复制过来的js
5.在main.js中导入svg.js文件
import svg from './common/svg.js';
Vue.use(svg)
6.在页面中使用
<svg class="icon" >
<use xlink:href="#icon-caomei"></use>
</svg>
icon-caomei为svg对应的id
image.png
7.效果
image.png
8.调整图标大小
.icon {
width: 80upx;
height: 80upx;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
9.xlink:href动态赋值
<svg class="icon">
<use v-bind:xlink:href="'#'+item.cover"></use>
</svg>
网友评论