在vue 中使用iconfont

symbol

引入js

<script type="text/javascript" src=""></script>

引入css

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

<link rel="stylesheet" type="text/css" href="">

引用icon

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

使用组件 one-icon

import OneIcon from '@veypi/one-icon'
// 注意下载下来的js文件放public文件夹里
Vue.use(OneIcon, {href: './icon.js'})
// 或者使用阿里cdn 好处是每次添加icon后不用更新 但是无法离线或内网使用
Vue.use(OneIcon, {href: 'https://at.alicdn.com/t/font*****.js'})

参考

官方文档

1.2 KiB Raw Blame History

在vue 中使用iconfont

symbol

使用组件 one-icon

参考

1.2 KiB

Raw Blame History