@cjhsyc/icons v0.2.1

c-icons

基于vue3的svg图标组件库，支持ts类型检查。

安装

# 使用npm
npm i @cjhsyc/icons
# 使用pnpm
pnpm add @cjhsyc/icons

手动导入

<script setup lang="ts">
import CIcon, { Film, Like, MusicList, Play, Settings } from '@cjhsyc/icons'
import '@cjhsyc/icons/style'
</script>

<template>
  <film />
  <play width="200" height="200" color="orange" />
  <i style="font-size: 150px; color: skyblue">
    <like />
  </i>
  <c-icon :size="300" color="pink">
    <music-list />
  </c-icon>
  <c-icon class="loading">
    <settings />
  </c-icon>
</template>

完整引入

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { CIcons } from '@cjhsyc/icons'
import '@cjhsyc/icons/style'

const app = createApp(App)
app.use(CIcons)
app.mount('#app')

<template>
  <c-icon :size="100" color="gray">
    <mike />
  </c-icon>
</template>

自动导入

• 需要安装unplugin-vue-components

pnpm add -D unplugin-vue-components

• 在vite.config.ts中配置：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { CIconsResolver } from '@cjhsyc/icons'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: CIconsResolver(),
      dts: './src/types/components.d.ts'
    }),
  ],
})

• 使用图标时加上前缀：ci-

<template>
  <c-icon :size="160">
    <ci-loop />
  </c-icon>
</template>

感谢

• 图标：iconfont

• unplugin-icons