60 lines
1.2 KiB
Markdown
60 lines
1.2 KiB
Markdown
# 在vue 中使用iconfont
|
|
|
|
|
|
|
|
### symbol
|
|
|
|
- 引入js
|
|
|
|
<img src="https://public.veypi.com/img/screenshot/20211020152019.png" alt="image-20211020152019051" style="zoom:40%;" />
|
|
|
|
```html
|
|
<script type="text/javascript" src=""></script>
|
|
```
|
|
|
|
|
|
|
|
- 引入css
|
|
|
|
```html
|
|
<style type="text/css">
|
|
.icon {
|
|
width: 1em; height: 1em;
|
|
vertical-align: -0.15em;
|
|
fill: currentColor;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
```html
|
|
<link rel="stylesheet" type="text/css" href="">
|
|
```
|
|
|
|
- 引用icon
|
|
|
|
```html
|
|
<svg class="icon" aria-hidden="true">
|
|
<use xlink:href="#icon-xxx"></use>
|
|
</svg>
|
|
```
|
|
|
|
|
|
|
|
### 使用组件 one-icon
|
|
|
|
```typescript
|
|
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'})
|
|
```
|
|
|
|
|
|
|
|
### 参考
|
|
|
|
- [官方文档](https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d0091c141&helptype=code)
|
|
|