关于使用 @iconify/vue2图标库组件的离线使用

news2025/1/15 12:30:59

Iconify 是最通用的图标框架，将各种图标库的图标集中在这里的一个组件库，例如ant-design,element-ui等网站地址如下
https://iconify.design/getting-started/

1.安装依赖

这两个包提供了图标组件和离线图标数据的支持。

npm install @iconify/vue2 @iconify/json

2. 准备离线图标数据

@iconify/json 包含了大量的图标数据，我们可以选择需要的图标集合并将其添加到我们的项目中。以 simple-line-icons 和 ant-design 图标为例，我们需要下载这两个图标集合的 JSON 文件：

simple-line-icons.json：包含了 Simple Line Icons 图标数据
ant-design.json：包含了 Ant Design 图标数据
可以从 @iconify/json 的 GitHub 仓库或其他可信来源下载这些 JSON 文件，并将它们放在您的项目中。

3.使用示例

<template>
  <div>
    <!-- 使用 Simple Line Icons 图标 -->
    <Icon icon="simple-line:home" />
    <!-- 使用 Ant Design 图标 -->
    <Icon icon="ant-design:search" />
  </div>
</template>

<script>
 	import { Icon, addCollection } from '@iconify/vue2';
	import simple from '@iconify/json/json/simple-line-icons.json'
	import design from '@iconify/json/json/ant-design.json'
	export default {
	  components: { Icon },
	  mounted() {
	    addCollection(simple)
	    addCollection(design)
	  },
	}
</script>