@zanejs/icons

English | 中文

Introduction

A modern native Web Components icon library built with Stencil, containing 285+ meticulously designed SVG icons. Framework-agnostic, works in JS/Vue/React/Angular projects.

Features

285+ Icons: Rich icon set covering common UI scenarios
Web Component: Native Custom Elements, supports all modern frameworks
High Performance: Optimized by Stencil compiler
Easy to Use: Simple HTML tags for usage
Customizable: Supports CSS custom properties and style overrides
Multiple Format Support: ESM, CommonJS, and UMD
TypeScript Support: Complete type definitions
Responsive: Adapts to various screen sizes
Dual-tone Support: Supports both filled and outline styles

Installation

NPM

npm install @zanejs/icons

PNPM

pnpm add @zanejs/icons

YARN

yarn add @zanejs/icons

Quick Start

Basic Usage

Use directly in HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/@zanejs/icons@1.0.1/dist/zane-icons/zane-icons.esm.js"></script>
  <title>Zane Icons Demo</title>
</head>
<body></body>
  <!-- Use search icon -->
  <zane-icon-search style="font-size: 32px; color: #333;"></zane-icon-search>

  <!-- Use user icon -->
  <zane-icon-user style="font-size: 24px; color: #666;"></zane-icon-user>

  <!-- Use close icon -->
  <zane-icon-close-bold style="font-size: 20px; color: #999;"></zane-icon-close-bold>
</body>
</html>

Usage in React

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

+ import { defineCustomElements } from '@zanejs/ui/loader';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

+ defineCustomElements();

import React from 'react';

function MyComponent() {
  return (
    <div>
      <zane-icon-search style={{ fontSize: '32px', color: '#333' }} />
      <zane-icon-user style={{ fontSize: '24px', color: '#666' }} />
    </div>
  );
}

Usage in Vue

// src/main.ts

import { createApp } from 'vue'
import App from './App.vue';
+ import { defineCustomElements } from '@zanejs/icons/loader';

+ defineCustomElements();

createApp(App).mount('#app')

Modify vite.config.js for Vue compilation compatibility with custom elements:

import { defineConfig } from 'vite';

export default defineConfig({
  vue: {
    template: {
      compilerOptions: {
+        isCustomElement: tag => tag.startsWith('zane-')
      },
    },
  },
});

Icon Categories

Arrows & Navigation

zane-icon-arrow-up / zane-icon-arrow-up-bold
zane-icon-arrow-down / zane-icon-arrow-down-bold
zane-icon-arrow-left / zane-icon-arrow-left-bold
zane-icon-arrow-right / zane-icon-arrow-right-bold
zane-icon-d-arrow-left
zane-icon-back
zane-icon-top
zane-icon-bottom-left
zane-icon-bottom-right
zane-icon-caret-right
zane-icon-fold
zane-icon-expand
zane-icon-pointer

Common Actions

zane-icon-search
zane-icon-plus
zane-icon-check
zane-icon-close-bold
zane-icon-edit
zane-icon-delete
zane-icon-download
zane-icon-upload-filled
zane-icon-share
zane-icon-link
zane-icon-scissor
zane-icon-copy

Status Feedback

zane-icon-success-filled
zane-icon-warning / zane-icon-warning-filled
zane-icon-info-filled
zane-icon-circle-check / zane-icon-circle-check-filled
zane-icon-remove-filled
zane-icon-checked
zane-icon-failed

Notifications

zane-icon-bell / zane-icon-bell-filled
zane-icon-mute-notification

User Related

zane-icon-user / zane-icon-user-filled
zane-icon-avatar
zane-icon-key

Location

zane-icon-location-filled
zane-icon-map-location
zane-icon-position
zane-icon-place
zane-icon-add-location

Media Control

zane-icon-video-camera-filled
zane-icon-video-pause
zane-icon-microphone
zane-icon-headset
zane-icon-stopwatch
zane-icon-watch
zane-icon-alarm-clock

Shopping & Business

zane-icon-shopping-bag
zane-icon-wallet
zane-icon-price-tag
zane-icon-discount
zane-icon-postcard
zane-icon-document / zane-icon-document-add
zane-icon-briefcase
zane-icon-platform

Tools & Settings

zane-icon-tools
zane-icon-setting
zane-icon-management
zane-icon-connection
zane-icon-cpu
zane-icon-switch-button

Charts & Statistics

zane-icon-pie-chart
zane-icon-trend-charts
zane-icon-histogram
zane-icon-data-board

Sports

zane-icon-soccer
zane-icon-baseball
zane-icon-basketball

Food & Drink

zane-icon-coffee
zane-icon-mug
zane-icon-cold-drink
zane-icon-ice-drink
zane-icon-ice-tea
zane-icon-takeaway-box
zane-icon-bowl
zane-icon-fork-spoon
zane-icon-knife-fork
zane-icon-grape
zane-icon-dessert
zane-icon-ice-cream-square
zane-icon-apple
zane-icon-sugar

Transportation

zane-icon-bicycle
zane-icon-ship

Buildings & Facilities

zane-icon-house
zane-icon-home-filled
zane-icon-school
zane-icon-first-aid-kit

Science

zane-icon-magnet
zane-icon-lightning

Entertainment

zane-icon-trophy
zane-icon-gold-medal

Weather

zane-icon-sunrise
zane-icon-partly-cloudy
zane-icon-umbrella

Health & Safety

zane-icon-smoking
zane-icon-no-smoking

Others

zane-icon-star-filled
zane-icon-flag
zane-icon-opportunity
zane-icon-present
zane-icon-list
zane-icon-grid
zane-icon-brush / zane-icon-brush-filled
zane-icon-picture-rounded
zane-icon-calendar
zane-icon-camera-filled

💡 Tip: Complete icon list can be found in the dist/zane-icon.md file after running npm run build

Custom Styling

Changing Size

/* Global setting */
zane-icon-search {
  font-size: 32px; /* Default 16px */
}

/* Individual setting */
.icon-large {
  font-size: 48px;
}

Changing Color

/* Using currentColor */
zane-icon-user {
  color: #333;
}

/* Inheriting parent element color */
.parent-element {
  color: #007acc;
}
.parent-element zane-icon-search {
  /* Inherits #007acc */
}

/* Using CSS custom properties */
zane-icon-star-filled {
  --icon-color: gold;
  color: var(--icon-color);
}

Custom SVG Attributes

<zane-icon-search
  style="font-size: 32px; color: #333;"
  fill="currentColor"
  stroke="none"
  aria-label="Search icon"
  role="img"
/>

Development Guide

Requirements

Node.js >= 16
pnpm (recommended) or npm

Install Dependencies

pnpm install

Development Mode

# Start development server (with watch mode)
pnpm run start

# Run tests
pnpm run test

Build Project

# Build production version
pnpm run build

# Or use stub command
pnpm run stub

Generate Components

Icon components are automatically generated from SVG files:

Place SVG files in the svg/ directory
Run npm run transform to convert icons
Run npm run build to build components

Convert SVG Icons

npm run transform

This command will:

Read all SVG files in the svg/ directory
Optimize SVG code using SVGO
Convert optimized SVGs to Stencil components
Generate to the src/components/ directory

Project Structure

zane-icons/
├── svg/                      # Original SVG icon files
│   ├── search.svg
│   ├── user.svg
│   └── ...
├── src/                      # Source code
│   ├── components/           # Generated component files
│   │   ├── search.tsx
│   │   ├── user.tsx
│   │   └── ...
│   ├── index.ts             # Component index
│   └── index.html           # Example page
├── dist/                     # Build output directory
├── loader/                   # Component loader
├── scripts/                  # Build scripts
│   └── transfer-svg.mjs      # SVG conversion script
├── stencil.config.ts         # Stencil configuration
├── package.json
└── README.md

Technology Stack

Stencil - Component compiler
TypeScript - Type safety
SVGO - SVG optimization
Jest - Unit testing
Puppeteer - End-to-end testing

Contributing

Issues and Pull Requests are welcome!

Contribution Process

Fork the repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Adding New Icons

Prepare SVG files that meet the specifications:
- Dimensions: 1024x1024
- Color: Use currentColor to inherit parent element color
- Minimization: Remove unnecessary metadata
Place SVG files in the svg/ directory
Run the conversion commands:
```
npm run transform
npm run build
```
Commit the generated component files

License

This project is open source under the MIT license.

Acknowledgments

Thanks to all developers who have contributed to this project!

⭐ If this project helps you, please give it a star!

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
.claude		.claude
.vscode		.vscode
scripts		scripts
src		src
svg		svg
.gitattributes		.gitattributes
.gitconfig		.gitconfig
.gitignore		.gitignore
.npmrc		.npmrc
README.md		README.md
README.zh-CN.md		README.zh-CN.md
logo.svg		logo.svg
package.json		package.json
stencil.config.ts		stencil.config.ts
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation