From fca728f091dc7bcb4c20fa5d0a8bbff26c97d289 Mon Sep 17 00:00:00 2001 From: Rhen Cloud Date: Thu, 1 Jan 2026 23:59:08 +0800 Subject: [PATCH] update --- SIMPLEICONS_GUIDE.md | 140 ------------------------------------------- 1 file changed, 140 deletions(-) delete mode 100644 SIMPLEICONS_GUIDE.md diff --git a/SIMPLEICONS_GUIDE.md b/SIMPLEICONS_GUIDE.md deleted file mode 100644 index a23579b..0000000 --- a/SIMPLEICONS_GUIDE.md +++ /dev/null @@ -1,140 +0,0 @@ -# 在 Markdown 中使用 Simple Icons 指南 - -## 概述 - -在这个 Nuxt Content 项目中，可以通过 `@nuxt/icon` 和 Iconify 集成在 Markdown 中使用 Simple Icons。 - -## 方法 1：直接在 Markdown 中使用图标代码（推荐） - -在 Markdown 文本中，使用反引号包裹图标名称，Nuxt Content 会自动渲染为图标。 - -### 格式 - -```markdown -`simple-icons:图标名称` **文字** -``` - -### 常见图标例子 - -```markdown -`simple-icons:javascript` **JavaScript** -`simple-icons:typescript` **TypeScript** -`simple-icons:python` **Python** -`simple-icons:vuedotjs` **Vue.js** -`simple-icons:react` **React** -`simple-icons:nextdotjs` **Next.js** -`simple-icons:nuxtdotjs` **Nuxt.js** -`simple-icons:html5` **HTML** -`simple-icons:css3` **CSS** -`simple-icons:git` **Git** -`simple-icons:github` **GitHub** -`simple-icons:docker` **Docker** -`simple-icons:vercel` **Vercel** -`simple-icons:netlify` **Netlify** -`simple-icons:cloudflare` **Cloudflare** -`simple-icons:express` **Express** -`simple-icons:django` **Django** -`simple-icons:tailwindcss` **Tailwind CSS** -`simple-icons:markdown` **Markdown** -`simple-icons:nodejs` **Node.js** -``` - -## 方法 2：在 HTML 中使用 Icon 组件 - -如果你需要更灵活的控制，可以在 Markdown 中直接使用 HTML： - -```html - -``` - -## 方法 3：在表格中使用图标 - -```markdown -| 技术 | 说明 | -|------|------| -| `simple-icons:javascript` JavaScript | 编程语言 | -| `simple-icons:vuedotjs` Vue.js | 前端框架 | -| `simple-icons:nuxtdotjs` Nuxt.js | 全栈框架 | -``` - -## 方法 4：在列表中使用图标 - -```markdown -- `simple-icons:github` **GitHub** - 版本控制 -- `simple-icons:docker` **Docker** - 容器化 -- `simple-icons:vercel` **Vercel** - 部署平台 -``` - -## 查找可用的图标 - -Simple Icons 有很多可用的图标。查找图标的方式： - -1. **访问官方网站**：https://simpleicons.org/ - - 搜索你需要的图标 - - 复制图标名称（通常是 slug 格式） - -2. **通用命名规则**： - - 图标名称通常是品牌名的小写版本 - - 使用 `.` 代替空格或特殊字符（如 `next.js` 变为 `nextdotjs`） - - 使用 `+` 的地方也用 `plus`（如 `c++` 变为 `cplusplus`） - -## 实际应用示例 - -### 在 about.md 中 - -```markdown -## 我的技能 - -### 前端技术 -- `simple-icons:html5` **HTML5** -- `simple-icons:css3` **CSS3** -- `simple-icons:javascript` **JavaScript** -- `simple-icons:typescript` **TypeScript** -- `simple-icons:vuedotjs` **Vue.js** -- `simple-icons:react` **React** - -### 框架 -- `simple-icons:nuxtdotjs` **Nuxt.js** -- `simple-icons:nextdotjs` **Next.js** -- `simple-icons:tailwindcss` **Tailwind CSS** - -### 工具 -- `simple-icons:git` **Git** -- `simple-icons:github` **GitHub** -- `simple-icons:docker` **Docker** -- `simple-icons:vercel` **Vercel** -``` - -## 常见问题 - -### Q: 为什么图标没有显示？ -A: -- 检查图标名称是否正确（区分大小写） -- 确保使用了 `simple-icons:` 前缀 -- 检查网络连接（Iconify 需要从 CDN 加载） - -### Q: 如何自定义图标的大小和颜色？ -A: 在 HTML 中使用完整的 Icon 组件： -```html - -``` - -### Q: 能在代码块中使用图标吗？ -A: 是的，可以在代码块外使用，但代码块内的内容会被视为代码。 - -### Q: 有其他图标库可用吗？ -A: 是的！Iconify 支持多个库： -- `fa-solid:` - Font Awesome Solid -- `mdi:` - Material Design Icons -- `heroicons:` - Heroicons -- 等等 - -## 更多资源 - -- Simple Icons 官网：https://simpleicons.org/ -- Iconify 官网：https://iconify.design/ -- Nuxt Icon 文档：https://www.npmjs.com/package/@nuxt/icon - ---- - -现在你可以在 Markdown 中自由使用 Simple Icons 了！🚀