保姆级教程轻松在Nuxt中使用IconPark图标库

官网传送门 @IconPark图标库

关于IconPark图标库

IconPark图标库是一个通过技术驱动矢量图标样式的开源图标库,可以实现根据单一SVG源文件变换出多种主题, 具备丰富的分类、更轻量的代码和更灵活的使用场景;致力于构建高质量、统一化、可定义的图标资源,让大多数人都能够选择适合自己的风格图标。

2020年9月3日正式开源

特点:

  • 提供超过2000+预设图标,分类
  • 支持4种主题和在线转换:线性,填充,双色,四色
  • 网站提供多种便捷操作:复制SVG code、复制React组件、复制Vue组件、下载PNG、下载SVG
  • 针对技术同学,支持图标组件代码导出,包括React Icons、Vue Icons、Vue3 Icons、SVG Icons
  • 支持项目管理:方便个性化上传、管理图标、及导出图标组件NPM包导出

快速开始

新建项目

注意1

项目最多能创建三个

添加图标

弹出对话框之后,选择要添加到的项目------点击确定,就添加成功了

使用(CDN引入)

Web Component: 浏览器提供的原生组件形式,天然跨框架。

SVG Symbol: SVG 原生引用形式。图标原样展现,不支持组件化能力,但具备更好的兼容性。

使用(组件)

在Nuxt中使用(CDN方式)

配置

php 复制代码
// https://nuxt.com/docs/api/configuration/nuxt-config
// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  app: {
    head: {
      script: [
        {
          src: "https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_33138_3.5db52669a67acd9c281275f489523c5a.js",
          // async: true,
          // defer: true,
        },
      ],
    },
  },
});

使用

vue 复制代码
 <div class="base-new-card_l_b_info text-grad">
          <iconpark-icon name="preview-open"></iconpark-icon>
          {{ count?.read || 0 }}
          <iconpark-icon name="like"></iconpark-icon>
          {{ count?.admire || 0 }}
 </div>

快去自己试试吧

相关推荐
浏览器爱好者8 分钟前
如何删除Google Chrome中的所有历史记录【一键清除】
前端·chrome
米开朗基杨9 分钟前
Cursor 最强竞争对手来了,专治复杂大项目,免费一个月
前端·后端
Lonwayne10 分钟前
Web服务器技术选型指南:主流方案、核心对比与策略选择
运维·服务器·前端·程序那些事
brzhang23 分钟前
效率神器!TmuxAI:一款无痕融入终端的AI助手,让我的开发体验翻倍提升
前端·后端·算法
海底火旺25 分钟前
JavaScript 原型链检查:从 `instanceof` 到 `isPrototypeOf` 的演进
前端·javascript·面试
埃兰德欧神25 分钟前
Lynx:革新跨端开发,一次编写,多端闪耀
前端·javascript·前端框架
贾公子28 分钟前
详解 LeetCode 第 242 题 - 有效的字母组
前端
前端太佬34 分钟前
小程序登录与授权功能全解析:从原理到设计的实战指南 (2025年最新规范实践版)
前端·微信·微信小程序
一抓掉一大把39 分钟前
elementui日历显示红点及根据日程范围判断是否有红点
前端·javascript·elementui
前端.火鸡39 分钟前
使用wavesurferJs实现录音音波效果
开发语言·前端·javascript