diff --git a/SIMPLEICONS_GUIDE.md b/SIMPLEICONS_GUIDE.md new file mode 100644 index 0000000..a23579b --- /dev/null +++ b/SIMPLEICONS_GUIDE.md @@ -0,0 +1,140 @@ +# 在 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 了！🚀 diff --git a/app/app.vue b/app/app.vue index ee66781..a411621 100644 --- a/app/app.vue +++ b/app/app.vue @@ -27,9 +27,6 @@ const bgStyle = computed(() =>