上海品牌网站建设公外贸网站搭建

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>