1.0.2 • Published 2 years ago

@dingdaoos/lucid-icons v1.0.2

Weekly downloads
-
License
BSD
Repository
-
Last release
2 years ago

How to use

全局引用

npm install -S @dingdaoos/lucid-icons

import LucidIcons from '@dingdaoos/lucid-icons'
Vue.use(LucidIcons)

按需引用

借助 babel-plugin-import,我们可以只引入需要的组件,以达到减小项目体积的目的。

首先,安装 babel-plugin-import。 1) 安装插件

npm install babel-plugin-import -D

2) 配置插件 在 .babelrc 或 babel.config.js 中添加配置:

{
    "plugins": [
        [
        "import",
        {
            "libraryName": "@dingdaoos/lucid-icons",
            "libraryDirectory": "lib"
        }
        ]
    ]
}

接下来,如果你只希望引入部分Icon,比如 IconLoading 和 IconCamera,那么需要在 main.js 中写入以下内容:

import { IconLoading, IconCamera } from '@dingdaoos/lucid-icons'
Vue.use(IconLoading)
Vue.use(IconCamera)

UMD 方式使用组件

在浏览器中使用 script 和 link 标签直接引入文件(不推荐)

请确保已提前引入 Vue 2.x,推荐使用 2.6.x 版本

UMD: https://lucent.dev.dingdaoos.com/lucid-icons/lucid-icons.umd.js

UMD min: https://lucent.dev.dingdaoos.com/lucid-icons/lucid-icons.umd.min.js

CSS: https://lucent.dev.dingdaoos.com/lucid-icons/lucid-icons.css