首页 前端技术

在Vue3中如何使用字节图标IconPark

• 前端技术 • 阅读 1997

项目开发过程中，不可避免的总会用到图标，说到图标,肯定会首先想起的是iconfont，但是今天给大家介绍的是由字节开源的图标库-iconPark

项目开发过程中，不可避免的总会用到图标，说到图标,肯定会首先想起的是iconfont，但是今天给大家介绍的是由字节开源的图标库-iconPark

npm安装

npm install @icon-park/vue-next

使用

<template>
<home theme="filled"/>
</template>
<script>
import {Home} from '@icon-park/vue-next';

export default {
    components: {
        Home
    }
}
</script>

按需引入

可以使用babel-plugin-import来按需加载图标，配置如下:

// .babelrc or babel.config.js
{
    "plugins": [
        [
            "import",
            {
                libraryName: '@icon-park/vue',
                libraryDirectory: 'es/icons',
                camel2DashComponentName: false // default: true,
            }
        ]
    ]
}

全局使用

全局使用由于在main.ts中引入大量组件代码可能不太美观，我们可以将这部分抽离出去放在一个ts中维护，在src目录下新增 plugins目录新建icon-park.ts文件

import { Home } from '@icon-park/vue-next'
export function IconPark (app) {
  app.component('Home', Home)
}

main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
const app = createApp(App)

// 注册字节跳动图标
import iconPark from './plugin/icon-park'

// router
import router from './router/index'
app.use(router)

app.mount('#app')

之后你就可以随意的调用图标了

<home theme="outline" size="24" fill="#333"/>

以上这篇在vue3中如何使用字节图标IconPark就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。

原创文章，作者：ECHO陈文，如若转载，请注明出处：https://www.luweipai.cn/html/1670251577/

赞 (1)

相关推荐

ECHO陈文
ECHO陈文
ECHO陈文

关注互联网技术开发与维护运营

π • 热门

  • 1 赞