npm 包 @lokua/mdi-svg 使用教程

前言

在前端开发中，使用 icon 图标是非常普遍的需求，其中 Material Design Icons（MDI）是一个非常受欢迎的 icon 图标库，它提供了大量的图标符号，向开发者提供了很大的方便。

在本文中，我将介绍一个非常好用的库——"@lokua/mdi-svg"，它提供了一个简单的方式来加载 Material Design Icons 的 SVG 图标。

安装

你可以使用 npm 或是 yarn 来安装 "@lokua/mdi-svg"，如下：

# 使用 npm 安装
npm install @lokua/mdi-svg

# 使用 yarn 安装
yarn add @lokua/mdi-svg

使用

"@lokua/mdi-svg" 的 API 很简单，它只提供了一个函数来加载 SVG 图标。

语法

loadSvg(icon: string, size: string): Promise<SVGAElement>

其中：

• icon: string，必选，需要加载的 icon 名称。
• size: string，可选，icon 大小。

返回

返回一个 Promise 对象，解析为 SVGAElement，SVG 图标的 DOM 元素。

示例

在下面的代码中，我们首先引入 "@lokua/mdi-svg"：

import { loadSvg } from '@lokua/mdi-svg'

然后，我们可以调用 loadSvg 函数来异步加载图标 SVG 文件，并将其插入到文档中：

// 加载菜单图标
loadSvg('menu', '24px')
    .then(svg => {
        document.body.appendChild(svg)
    })

在这个例子中，我们使用 loadSvg 函数来异步加载名为 "menu" 的 icon 图标，并将其大小设置为24像素，最后将其插入到文档中。

结语

"@lokua/mdi-svg" 是一个非常好用的库，它可以帮助你非常容易地加载 Material Design Icons 的 SVG 图标，并在页面中使用它们。

希望本文能对你有所帮助，如果您对此有任何疑问或建议，请在下面留言。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc8967216659e2445f6