@kanjianmusic/logos-iconify

@kanjianmusic/logos-iconify

看见音乐平台图标库的 Iconify 格式包。

说明

本图标库为每个平台提供两种版本：

• 彩色版本：{platform}-color - 保持品牌原色，不受 CSS 影响
• 单色版本：{platform} - 使用 currentColor，可通过 CSS 自定义颜色

查看所有可用图标列表，请查看 icons.json 文件。

示例

图标名称	类型	描述
spotify	单色	Spotify 单色图标，可自定义颜色
spotify-color	彩色	Spotify 品牌色图标
apple-music	单色	Apple Music 单色图标
apple-music-color	彩色	Apple Music 品牌色图标

💡 提示：目前包含 35+ 音乐平台图标，每个平台都有彩色和单色两个版本。

安装

npm install @kanjianmusic/logos-iconify
# 或
yarn add @kanjianmusic/logos-iconify
# 或
pnpm add @kanjianmusic/logos-iconify

使用方法（以 vue 为例）

1. 引入

在 App.vue 中

import { addCollection } from '@iconify/vue';
import kanjianLogos from '@kanjianmusic/logos-iconify';

// 添加图标集合到 Iconify
addCollection(kanjianLogos)

2. 使用

<template>
  <!-- 彩色版本 -->
  <Icon icon="kanjian-logos:spotify-color" />

  <!-- 单色版本，可自定义颜色 -->
  <Icon icon="kanjian-logos:spotify" style="color: #1db954;" />
</template>

<script setup>
import { Icon } from '@iconify/vue'
</script>

VSCode Iconify IntelliSense 插件配置

如果你使用 Iconify IntelliSense 插件，可以添加本地图标集合以获得智能提示。

在项目根目录的 .vscode/settings.json 中添加：

{
  "iconify.customCollectionJsonPaths": [
    "./node_modules/@kanjianmusic/logos-iconify/lib/index.json"
  ]
}

这样你就可以在编辑器中获得图标的智能提示和预览。