Repository: element-plus/element-plus-icons
Branch: main
Commit: e9cb3c980a07
Files: 29
Total size: 14.1 KB

Directory structure:
gitextract_8744mh5w/

├── .editorconfig
├── .gitattributes
├── .github/
│   ├── FUNDING.yml
│   └── workflows/
│       ├── release.yml
│       └── unit-test.yml
├── .gitignore
├── .npmrc
├── .vscode/
│   └── settings.json
├── LICENSE
├── README.md
├── eslint.config.js
├── package.json
├── packages/
│   ├── svg/
│   │   ├── package.json
│   │   └── svgo.config.js
│   └── vue/
│       ├── .gitignore
│       ├── build/
│       │   ├── build.ts
│       │   └── generate.ts
│       ├── package.json
│       ├── src/
│       │   ├── global.ts
│       │   └── index.ts
│       ├── tsconfig.build.json
│       └── tsconfig.json
├── playground/
│   ├── index.html
│   ├── package.json
│   ├── src/
│   │   ├── App.vue
│   │   └── main.ts
│   └── vite.config.ts
├── pnpm-workspace.yaml
└── tsconfig.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .editorconfig
================================================
root = true

[*]
indent_size = 2
end_of_line = lf
insert_final_newline = true

[*.svg]
insert_final_newline = false


================================================
FILE: .gitattributes
================================================
* text=auto eol=lf


================================================
FILE: .github/FUNDING.yml
================================================
github: [sxzz, JeremyWuuuuu, YunYouJun, iamkun]


================================================
FILE: .github/workflows/release.yml
================================================
name: Release

on:
  push:
    tags:
      - 'v*'

jobs:
  release:
    uses: sxzz/workflows/.github/workflows/release.yml@v1
    with:
      publish: true
      build: pnpm run build
    permissions:
      contents: write
      id-token: write


================================================
FILE: .github/workflows/unit-test.yml
================================================
name: Unit Test

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

permissions: {}

jobs:
  unit-test:
    uses: sxzz/workflows/.github/workflows/unit-test.yml@v1
    with:
      skip-test: true
      build-for-lint: true


================================================
FILE: .gitignore
================================================
node_modules
.DS_Store
dist
*.log


================================================
FILE: .npmrc
================================================
shell-emulator = true


================================================
FILE: .vscode/settings.json
================================================
{
  "editor.formatOnSave": true,
  "[xml]": {
    "editor.formatOnSave": false
  }
}


================================================
FILE: LICENSE
================================================
The MIT License (MIT)

Copyright (c) 2020-PRESENT Element Plus (https://github.com/element-plus)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
<p align="center">
  <img width="300px" src="https://user-images.githubusercontent.com/10731096/95823103-9ce15780-0d5f-11eb-8010-1bd1b5910d4f.png">
</p>

<p align="center">
  <a href="https://github.com/element-plus/element-plus-icons">
    <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/element-plus/element-plus-icons?style=social">
  </a>
  <a href="https://github.com/element-plus/element-plus-icons">
    <img alt="GitHub forks" src="https://img.shields.io/github/forks/element-plus/element-plus-icons?style=social">
  </a>
  <br>
</p>

# Element Plus Icons

[![Unit Test](https://github.com/element-plus/element-plus-icons/actions/workflows/unit-test.yml/badge.svg)](https://github.com/element-plus/element-plus-icons/actions/workflows/unit-test.yml)

- [`@element-plus/icons-svg`](https://www.npmjs.com/package/@element-plus/icons-svg) raw svg files
- [`@element-plus/icons-vue`](https://www.npmjs.com/package/@element-plus/icons-vue) vue components

## Preview

- [Documentation](https://element-plus.org/en-US/component/icon.html)
- [Icônes](https://icones.js.org/collection/ep)
- [Iconify](https://icon-sets.iconify.design/ep/)

## License

[MIT](./LICENSE) License © 2020-PRESENT Element Plus


================================================
FILE: eslint.config.js
================================================
import { sxzz } from '@sxzz/eslint-config'

export default sxzz()


================================================
FILE: package.json
================================================
{
  "name": "@element-plus/icons-monorepo",
  "type": "module",
  "version": "2.3.2",
  "private": true,
  "packageManager": "pnpm@10.28.1",
  "license": "MIT",
  "scripts": {
    "dev": "pnpm run -C playground dev",
    "build": "pnpm run -C ./packages/vue build",
    "lint": "eslint .",
    "lint:fix": "pnpm run lint --fix",
    "typecheck": "vue-tsc --noEmit",
    "format": "prettier --write . && pnpm run -C ./packages/svg optimize",
    "release": "bumpp -r"
  },
  "devDependencies": {
    "@sxzz/eslint-config": "^7.5.0",
    "@sxzz/prettier-config": "^2.2.6",
    "bumpp": "^10.4.0",
    "eslint": "^9.39.2",
    "prettier": "^3.8.1",
    "typescript": "^5.9.3",
    "vue-tsc": "^3.2.2"
  },
  "prettier": "@sxzz/prettier-config"
}


================================================
FILE: packages/svg/package.json
================================================
{
  "name": "@element-plus/icons-svg",
  "version": "2.3.2",
  "description": "SVG icon for Element Plus Icons collection.",
  "license": "MIT",
  "homepage": "https://element-plus.org/",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/element-plus/element-plus-icons.git",
    "directory": "packages/svg"
  },
  "bugs": {
    "url": "https://github.com/element-plus/element-plus-icons/issues"
  },
  "keywords": [
    "icon",
    "svg",
    "element-plus"
  ],
  "files": [
    "*.svg"
  ],
  "scripts": {
    "optimize": "svgo -f . -o ."
  },
  "devDependencies": {
    "svgo": "^4.0.0"
  }
}


================================================
FILE: packages/svg/svgo.config.js
================================================
// svgo.config.js
module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          convertPathData: {
            floatPrecision: 1,
          },
        },
      },
    },
  ],
}


================================================
FILE: packages/vue/.gitignore
================================================
src/components/*


================================================
FILE: packages/vue/build/build.ts
================================================
import { rm } from 'node:fs/promises'
import path from 'node:path'
import consola from 'consola'
import { build, type BuildOptions, type Format } from 'esbuild'
import GlobalsPlugin from 'esbuild-plugin-globals'
import vue from 'unplugin-vue/esbuild'
import { version } from '../package.json'

const pathSrc = path.resolve(import.meta.dirname, '../src')
const pathOutput = path.resolve(import.meta.dirname, '../dist')

const buildBundle = () => {
  const getBuildOptions = (format: Format) => {
    const options: BuildOptions = {
      entryPoints: [
        path.resolve(pathSrc, 'index.ts'),
        path.resolve(pathSrc, 'global.ts'),
      ],
      target: 'es2018',
      platform: 'neutral',
      plugins: [
        vue({
          isProduction: true,
          sourceMap: false,
          // https://github.com/vuejs/core/issues/5256#issuecomment-1173891407
          template: { compilerOptions: { hoistStatic: false } },
        }),
      ],
      bundle: true,
      format,
      minifySyntax: true,
      banner: {
        js: `/*! Element Plus Icons Vue v${version} */\n`,
      },
      outdir: pathOutput,
    }
    if (format === 'iife') {
      options.plugins!.push(
        GlobalsPlugin({
          vue: 'Vue',
        }),
      )
      options.globalName = 'ElementPlusIconsVue'
    } else {
      options.external = ['vue']
    }

    return options
  }
  const doBuild = async (minify: boolean) => {
    await Promise.all([
      build({
        ...getBuildOptions('esm'),
        entryNames: `[name]${minify ? '.min' : ''}`,
        minify,
      }),
      build({
        ...getBuildOptions('iife'),
        entryNames: `[name].iife${minify ? '.min' : ''}`,
        minify,
      }),
      build({
        ...getBuildOptions('cjs'),
        entryNames: `[name]${minify ? '.min' : ''}`,
        outExtension: { '.js': '.cjs' },
        minify,
      }),
    ])
  }

  return Promise.all([doBuild(true), doBuild(false)])
}

consola.info('cleaning dist...')
await rm(pathOutput, { recursive: true, force: true })
consola.info('building...')
await buildBundle()


================================================
FILE: packages/vue/build/generate.ts
================================================
import { mkdir, readFile, rm, writeFile } from 'node:fs/promises'
import { basename, resolve } from 'node:path'
import { fileURLToPath } from 'node:url'
import camelcase from 'camelcase'
import consola from 'consola'
import { format, type BuiltInParserName } from 'prettier'
import { glob } from 'tinyglobby'

consola.info('generating vue components')
const pathComponents = resolve(import.meta.dirname, '../src/components')
await rm(pathComponents, { recursive: true, force: true })
await mkdir(pathComponents, { recursive: true })
const files = await getSvgFiles()

consola.info('generating vue files')
await Promise.all(files.map((file) => transformToVueComponent(file)))

consola.info('generating entry file')
await generateEntry(files)

function getSvgFiles() {
  const svgPackageJson = fileURLToPath(
    import.meta.resolve('@element-plus/icons-svg/package.json'),
  )
  return glob('*.svg', {
    cwd: resolve(svgPackageJson, '..'),
    absolute: true,
  })
}

function getName(file: string) {
  const filename = basename(file).replace('.svg', '')
  const componentName = camelcase(filename, { pascalCase: true })
  return {
    filename,
    componentName,
  }
}

function formatCode(code: string, parser: BuiltInParserName = 'typescript') {
  return format(code, {
    parser,
    semi: false,
    singleQuote: true,
  })
}

async function transformToVueComponent(file: string) {
  const content = await readFile(file, 'utf8')
  const { filename, componentName } = getName(file)
  const vue = await formatCode(
    `
<template>
${content}
</template>
<script lang="ts" setup>
defineOptions({
  name: ${JSON.stringify(componentName)}
})
</script>`,
    'vue',
  )
  writeFile(resolve(pathComponents, `${filename}.vue`), vue, 'utf8')
}

async function generateEntry(files: string[]) {
  const code = await formatCode(
    files
      .map((file) => {
        const { filename, componentName } = getName(file)
        return `export { default as ${componentName} } from './${filename}.vue'`
      })
      .join('\n'),
  )
  await writeFile(resolve(pathComponents, 'index.ts'), code, 'utf8')
}


================================================
FILE: packages/vue/package.json
================================================
{
  "name": "@element-plus/icons-vue",
  "type": "module",
  "version": "2.3.2",
  "description": "Vue components of Element Plus Icons collection.",
  "license": "MIT",
  "homepage": "https://element-plus.org/",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/element-plus/element-plus-icons.git",
    "directory": "packages/vue"
  },
  "bugs": {
    "url": "https://github.com/element-plus/element-plus-icons/issues"
  },
  "keywords": [
    "icon",
    "svg",
    "vue",
    "element-plus"
  ],
  "sideEffects": false,
  "exports": {
    ".": {
      "types": "./dist/types/index.d.ts",
      "require": "./dist/index.cjs",
      "import": "./dist/index.js"
    },
    "./global": {
      "types": "./dist/types/global.d.ts",
      "require": "./dist/global.cjs",
      "import": "./dist/global.js"
    },
    "./*": "./*"
  },
  "main": "./dist/index.cjs",
  "module": "./dist/index.js",
  "unpkg": "dist/index.iife.min.js",
  "jsdelivr": "dist/index.iife.min.js",
  "types": "./dist/types/index.d.ts",
  "typesVersions": {
    "*": {
      "*": [
        "./*",
        "./dist/types/*"
      ]
    }
  },
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "pnpm run build:generate && run-p build:build build:types",
    "build:generate": "tsx build/generate.ts",
    "build:build": "NODE_ENV=production tsx build/build.ts",
    "build:types": "vue-tsc --declaration --emitDeclarationOnly"
  },
  "peerDependencies": {
    "vue": "^3.2.0"
  },
  "devDependencies": {
    "@element-plus/icons-svg": "workspace:*",
    "@types/node": "^25.0.10",
    "camelcase": "^9.0.0",
    "consola": "^3.4.2",
    "esbuild": "^0.27.2",
    "esbuild-plugin-globals": "^0.2.0",
    "npm-run-all2": "^8.0.4",
    "prettier": "^3.8.1",
    "tinyglobby": "^0.2.15",
    "tsx": "^4.21.0",
    "typescript": "^5.9.3",
    "unplugin-vue": "^7.1.0",
    "vue": "^3.5.27",
    "vue-tsc": "^3.2.2"
  }
}


================================================
FILE: packages/vue/src/global.ts
================================================
import * as icons from './components'
import type { App } from 'vue'

export interface InstallOptions {
  /** @default `ElIcon` */
  prefix?: string
}
// eslint-disable-next-line import/no-default-export
export default function elementPlusIcons(
  app: App,
  { prefix = 'ElIcon' }: InstallOptions = {},
) {
  for (const [key, component] of Object.entries(icons)) {
    app.component(prefix + key, component)
  }
}

export { icons }
export * from './components'


================================================
FILE: packages/vue/src/index.ts
================================================
export * from './components'


================================================
FILE: packages/vue/tsconfig.build.json
================================================
{
  "compilerOptions": {
    "composite": true,
    "target": "ES2021",
    "lib": ["ES2021"],
    "baseUrl": ".",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "types": ["node"],
    "strict": true,
    "noImplicitAny": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["build", "package.json"]
}


================================================
FILE: packages/vue/tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "ES2018",
    "jsx": "preserve",
    "lib": ["ES2018", "DOM"],
    "baseUrl": ".",
    "module": "ESNext",
    "moduleResolution": "node",
    "types": [],
    "strict": true,
    "noImplicitAny": true,
    "declaration": true,
    "declarationDir": "./dist/types",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "references": [{ "path": "./tsconfig.build.json" }],
  "include": ["./src/**/*"]
}


================================================
FILE: playground/index.html
================================================
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>


================================================
FILE: playground/package.json
================================================
{
  "name": "@element-plus/icons-playground",
  "type": "module",
  "private": true,
  "license": "MIT",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@element-plus/icons-svg": "workspace:*",
    "@element-plus/icons-vue": "workspace:*",
    "vue": "^3.5.27"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.3",
    "typescript": "^5.9.3",
    "vite": "^7.3.1"
  }
}


================================================
FILE: playground/src/App.vue
================================================
<script lang="ts" setup>
import { icons } from '@element-plus/icons-vue/global'
import { Upload } from '@element-plus/icons-vue'
</script>

<template>
  <Upload class="icon" />
  <hr />
  <component :is="Icon" v-for="(Icon, key) in icons" :key="key" class="icon" />
  <hr />
  <component
    :is="`ElIcon${key}`"
    v-for="key in Object.keys(icons)"
    :key="key"
    class="icon"
  />
</template>

<style>
.icon {
  height: 48px;
  color: #409eff;
}
</style>


================================================
FILE: playground/src/main.ts
================================================
import ElIcons from '@element-plus/icons-vue/global'
import { createApp } from 'vue'
import App from './App.vue'

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


================================================
FILE: playground/vite.config.ts
================================================
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [vue()],
})


================================================
FILE: pnpm-workspace.yaml
================================================
packages:
  - packages/*
  - playground

allowBuilds:
  esbuild: false

ignoreWorkspaceRootCheck: true
trustPolicy: no-downgrade


================================================
FILE: tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "es2018",
    "jsx": "preserve",
    "lib": ["ES2018", "DOM", "DOM.Iterable"],
    "baseUrl": ".",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "types": [],
    "allowJs": false,
    "strict": true,
    "noUnusedLocals": true,
    "outDir": "dist",
    "sourceMap": false,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}