Cosmic-icon NPM

About The Project

Cosmic-design supports many frameworks, e.g. vue、san. This project provide the icon set for them.

Features

Universal. Powered by Iconify and unplugin, suport importing knowned sets and combinning them.
Easy to Customize(DOING). You can totally use your own's icons by put in svg or config json data server
On-demand. Only bundle the icons you really use, while having all the options.

Built With

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

npm
```
npm install npm@latest -g
```
if you develop cosmic-design, use pnpm
```
npm install pnpm@latest -g
```

Installation

For non cosmic-design project:

npm install cosmic-design-icon

cosmic-design use pnpm workspace feature to import cosmic-design-icon locally

Usage

build tools config

It has the same using way with unplugin-icons, e.g. vite config:

import { defineConfig } from 'vite';
import Icons from 'unplugin-icons/vite';
import vue from '@vitejs/plugin-vue';
import { cosmicCollectionFactory } from './index';
import IconsResolver from 'unplugin-icons/resolver';
import Components from 'unplugin-vue-components/vite';


export default defineConfig({
    plugins: [
        vue(),
        Icons({
            compiler: 'vue3',
            customCollections: {
                ...cosmicCollectionFactory(),
            },
        }),
        Components({
            dts: true,
            resolvers: [
                IconsResolver({
                    customCollections: ['cosmic'],
                }),
            ],
        }),
    ],
    server: {
        open: '/site/index.html',
    },
});

refer icons in your components

Above config supporting Auto Import, more use case refer to unplugin-icons , default name conversion is:

{prefix}-{collection}-{icon}

and use the icon in vue:

<template>
    <div>Cosmic Icon</div>
    <i-cosmic-test />
</temp  late>

add more icons

In cosmic-design, just put svg file in the svg folder and run in cosmic icon folder:

pnpm run build

then commit your changes.

Other project config support is Doing.

examples

For living examples, please refer to the site folder

Roadmap

Config option
JSON Data Server
Mode: data-url、inline
auto preview new file
normalize svg files in ./svg folder
remove tsnode
split json

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement"(Note: please use pnpm and git-cz). Don't forget to give the project a star! Thanks again!