cosmic-icon

Cosmic Design Icon

The Icon set for all the Cosmic Design components lib

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

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.

(back to top)

Built With

• iconify
• unplugin-icons
• vite

(back to top)

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

(back to top)

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

(back to top)

Roadmap

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

(back to top)

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!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (cd to root folder and pnpm run commit)
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)