Skip to content

Commit 0abde83

Browse files
jikkaijikkai
authored
feat: add Vue icons package (#129)
1 parent fc22f71 commit 0abde83

19 files changed

Lines changed: 2679 additions & 154 deletions

‎README.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,19 @@ pnpm add @univerjs/icons
1919
yarn add @univerjs/icons
2020
```
2121

22+
For Vue 3 projects, install the Vue package:
23+
24+
```bash
25+
# npm
26+
npm install @univerjs/icons-vue
27+
28+
# pnpm
29+
pnpm add @univerjs/icons-vue
30+
31+
# yarn
32+
yarn add @univerjs/icons-vue
33+
```
34+
2235
## Usage
2336

2437
Use icons just like render a React component:
@@ -69,6 +82,33 @@ function App() {
6982
}
7083
```
7184

85+
## Vue 3 Usage
86+
87+
Use icons as Vue components:
88+
89+
```vue
90+
<script setup lang="ts">
91+
import { CopyIcon } from '@univerjs/icons-vue'
92+
</script>
93+
94+
<template>
95+
<CopyIcon class="toolbar-icon" style="font-size: 20px" />
96+
</template>
97+
```
98+
99+
Vue icons follow the same sizing and color conventions:
100+
101+
```vue
102+
<script setup lang="ts">
103+
import { PaintBucketDoubleIcon, SmileDoubleIcon } from '@univerjs/icons-vue'
104+
</script>
105+
106+
<template>
107+
<SmileDoubleIcon style="color: #3526de; font-size: 48px" />
108+
<PaintBucketDoubleIcon style="font-size: 48px" :extend="{ colorChannel1: 'red' }" />
109+
</template>
110+
```
111+
72112
### Icon source file
73113

74114
The icon resources provided by the designer are placed in the svg folder at the root directory. They are organized into different subdirectories to distinguish their categories.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
]
2323
},
2424
"scripts": {
25-
"build": "pnpm --filter ./packages/icons run build",
25+
"build": "pnpm --filter ./packages/icons run build && pnpm --filter ./packages/icons-vue run build",
2626
"dev": "pnpm build && pnpm --filter ./packages/app dev",
2727
"format": "oxfmt .",
2828
"format:check": "oxfmt --check .",
@@ -36,7 +36,7 @@
3636
"@types/react": "^19.2.14",
3737
"@types/react-dom": "^19.2.3",
3838
"lint-staged": "^17.0.5",
39-
"oxfmt": "^0.51.0",
39+
"oxfmt": "^0.53.0",
4040
"oxlint": "^1.66.0",
4141
"simple-git-hooks": "^2.13.1",
4242
"typescript": "^6.0.3"

‎packages/app/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
dist

‎packages/app/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Univer Icons Demo</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="/src/main.ts"></script>
11+
</body>
12+
</html>

‎packages/app/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "@univerjs/icons-demo",
3+
"version": "1.4.0",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite --host 127.0.0.1"
8+
},
9+
"dependencies": {
10+
"@univerjs/icons": "workspace:*",
11+
"@univerjs/icons-vue": "workspace:*",
12+
"react": "^19.2.6",
13+
"react-dom": "^19.2.6",
14+
"vue": "^3.5.35"
15+
},
16+
"devDependencies": {
17+
"vite": "^7.2.7"
18+
}
19+
}

0 commit comments

Comments
 (0)