Skip to content

Commit a1039d4

Browse files
cklwblovecklwblove
committed
feat: 🎸 新增 unicons 插件
1 parent 7c2dec0 commit a1039d4

File tree

23 files changed

+873
-230
lines changed

23 files changed

+873
-230
lines changed

‎README.md‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,54 @@
1-
# winjs-plugin-example
1+
# @winner-fed/plugin-unicons
22

3-
Example plugin for WinJS.
3+
WinJS 提供的有关 icons 统一解决方案，以 [unplugin-icons](https://github.com/unplugin/unplugin-icons) 作为底层解析工具。适配多种构建工具，如 webpack, rspack, vite 等和前端框架，如 vue2，vue等。插件本身也内置了 [Resolver](https://github.com/unplugin/unplugin-icons/tree/main?tab=readme-ov-file#use-with-resolver) 功能，可自动引入所需的 svg 图标。
44

55
<p>
6-
<a href="https://npmjs.com/package/winjs-plugin-example">
7-
<img src="https://img.shields.io/npm/v/winjs-plugin-example?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
6+
<a href="https://npmjs.com/package/@winner-fed/plugin-unicons">
7+
<img src="https://img.shields.io/npm/v/@winner-fed/plugin-unicons?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
88
</a>
99
<img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
10-
<a href="https://npmcharts.com/compare/winjs-plugin-example?minimal=true"><img src="https://img.shields.io/npm/dm/winjs-plugin-example.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a>
10+
<a href="https://npmcharts.com/compare/@winner-fed/plugin-unicons?minimal=true"><img src="https://img.shields.io/npm/dm/@winner-fed/plugin-unicons.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a>
1111
</p>
1212

1313
## Usage
1414

1515
Install:
1616

1717
```bash
18-
npm add winjs-plugin-example -D
18+
npm add @winner-fed/plugin-unicons -D
1919
```
2020

2121
Add plugin to your `.winrc.ts`:
2222

2323
```ts
2424
// .winrc.ts
25-
export default {
26-
plugins: ['winjs-plugin-example'],
27-
// 开启配置
28-
example: {}
29-
};
25+
import { defineConfig } from 'win';
26+
27+
export default defineConfig({
28+
plugins: ['@winner-fed/plugin-unicons'],
29+
unIcons: {
30+
include: [],
31+
// 支持 unplugin-icons 配置参数，如
32+
customCollections: {
33+
...
34+
}
35+
}
36+
});
3037
```
3138

32-
## Options
39+
## 配置
3340

34-
### foo
41+
### include
42+
- **类型**：`Array<string>`
43+
- **默认值**：`[]`
3544

36-
Some description.
45+
用于额外需要使用此方案解析的 svg 文件。注意需要使用**绝对路径**，并且会被插件内置的 svgo 压缩。
3746

38-
- Type: `string`
39-
- Default: `undefined`
40-
- Example:
47+
### 支持 unplugin-icons 扩展配置
48+
- 继承了 [unplugin-icons](https://github.com/unplugin/unplugin-icons)插件的[配置参数](https://github.com/unplugin/unplugin-icons/blob/main/src/types.ts)
4149

42-
```js
43-
export default {
44-
plugins: ['winjs-plugin-example'],
45-
// 开启配置
46-
example: {
47-
foo: 'bar'
48-
}
49-
};
50-
```
50+
## 注意
51+
- 在使用本地图标时，根据[unplugin-icons](https://github.com/unplugin/unplugin-icons?tab=readme-ov-file#name-conversion)的命名规则，默认使用 `icon` 作为前缀(prefix)，`win` 作为集合（collection）。默认解析 `src/icons` 下的 svg 图标，如 `icon-win-dog`
5152

5253
## License
5354

‎package.json‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"name": "winjs-plugin-example",
3-
"version": "0.0.0",
4-
"repository": "https://github.com/winjs-dev/winjs-plugin-template",
2+
"name": "@winner-fed/plugin-unicons",
3+
"version": "1.0.1",
4+
"repository": "https://github.com/winjs-dev/winjs-plugin-unicons",
55
"license": "MIT",
66
"type": "module",
77
"exports": {
@@ -27,6 +27,10 @@
2727
"simple-git-hooks": {
2828
"pre-commit": "npm run lint:write"
2929
},
30+
"dependencies": {
31+
"unplugin-icons": "^0.21.0",
32+
"svgo": "^3.3.2"
33+
},
3034
"devDependencies": {
3135
"@biomejs/biome": "^1.9.4",
3236
"@playwright/test": "^1.49.0",

‎playground/.winrc.ts‎

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,46 @@
1+
import { promises as fs, cpSync } from 'node:fs';
2+
import {
3+
ExternalPackageIconLoader,
4+
FileSystemIconLoader,
5+
} from 'unplugin-icons/loaders';
16
import { defineConfig } from 'win';
27

8+
/************************************************************/
9+
// DON'T DO THIS IN YOUR CODE: IT IS FOR TESTING PURPOSES ONLY
10+
cpSync('./plain-color-icons', './node_modules/plain-color-icons', {
11+
recursive: true,
12+
});
13+
cpSync('./@test-scope', './node_modules/@test-scope', { recursive: true });
14+
/************************************************************/
15+
316
export default defineConfig({
4-
plugins: ['../src'],
5-
example: {
6-
foo: 'bar',
17+
npmClient: 'yarn',
18+
mountElementId: 'winjsTemplateDemo2c78llfeubf',
19+
plugins: ['../dist/index.cjs'],
20+
unIcons: {
21+
customCollections: {
22+
...ExternalPackageIconLoader('@test-scope/test-color-icons'),
23+
...ExternalPackageIconLoader('plain-color-icons'),
24+
custom: FileSystemIconLoader('src/assets/custom-a'),
25+
inline: {
26+
foo: `
27+
<?xml version="1.0" standalone="no"?>
28+
<svg width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100"><clipPath id="IconifyId-17be3d363e5-c8de42-104"><circle cx="50" cy="50" r="50"></circle></clipPath><g fill-rule="evenodd" clip-rule="evenodd" clip-path="url(#IconifyId-17be3d363e5-c8de42-104)"><circle fill="#316EAC" cx="50" cy="50" r="50"></circle><path fill="#fff" d="M14.084 107.072a2 2 0 0 1-2-1.977L12.023 100H7a2 2 0 0 1-2-2V78c0-.323.078-.642.229-.928l11-21c.16-.306.396-.564.685-.751l16.375-10.596L40.08 21.44a2 2 0 0 1 1.617-1.417L42 20a2 2 0 0 1 1.664.891l5.62 8.429l5.349 1.783c.452.151.837.459 1.082.869l13.971 23.285l8.285-4.971a1.997 1.997 0 0 1 2.629.514l12 16c.083.11.154.229.213.354l7 15a2.002 2.002 0 0 1-.599 2.436l-28.916 22.072c-.349.266-.775.41-1.214.41h-55z"></path><path fill="#fff" d="M69.084 105.073h-55L14 98H7V78l11-21l17-11l7-24l6 9l6 2l15 25l10-6l12 16l7 15l-28.916 22.073z"></path><path fill="#6BC8F2" d="M8 108a2 2 0 0 1-2-2V76a2 2 0 0 1 .211-.895l10-20a1.99 1.99 0 0 1 .703-.784l16.328-10.565l5.813-24.222A2 2 0 0 1 41 18h.039a2 2 0 0 1 1.923 1.607l3 15c.038.196.048.395.028.593l-1 10a2.012 2.012 0 0 1-.111.484l-4 11l-4.81 13.468l2.891 14.456c.068.342.046.695-.063 1.025L35 97.324V106a2 2 0 0 1-2 2H8zm62.998-25c-.337 0-.678-.085-.99-.264l-7-4a2.001 2.001 0 0 1-.924-2.311l6-20c.15-.5.489-.921.944-1.174l9-5a2.014 2.014 0 0 1 1.987.025c.61.36.985 1.015.985 1.724v17c0 .395-.117.781-.336 1.109l-8 12a2 2 0 0 1-1.666.891z"></path><path fill="#6BC8F2" d="M70 57l-6 20l7 4l8-12V52l-9 5zM35 45L18 56L8 76v30h25v-9l4-12l-3-15l5-14l4-11l1-10l-3-15l-6 25z"></path><circle opacity=".2" fill="#fff" cx="76.5" cy="29.5" r="1.5"></circle><circle opacity=".1" fill="#fff" cx="14.5" cy="40.5" r="1.5"></circle><circle opacity=".43" fill="#fff" cx="56.5" cy="15.5" r="1.5"></circle></g></svg>
29+
`,
30+
async: () => fs.readFile('src/assets/giftbox.svg', 'utf-8'),
31+
},
32+
},
33+
iconCustomizer(collection, icon, props) {
34+
const name = `${collection}:${icon}`;
35+
if (
36+
name === 'inline:async' ||
37+
name === 'carbon:app-connectivity' ||
38+
name === 'custom:car-a'
39+
) {
40+
props.width = '3em';
41+
props.height = '3em';
42+
props.color = 'skyblue';
43+
}
44+
},
745
},
846
});

‎playground/@test-scope/test-color-icons/index.d.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type {
2+
IconifyChars,
3+
IconifyInfo,
4+
IconifyJSON,
5+
IconifyMetaData,
6+
} from '@iconify/types';
7+
8+
export type { IconifyChars, IconifyInfo, IconifyJSON, IconifyMetaData };
9+
10+
export declare const icons: IconifyJSON;
11+
export declare const info: IconifyInfo;
12+
export declare const metadata: IconifyMetaData;
13+
export declare const chars: IconifyChars;

‎playground/@test-scope/test-color-icons/index.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/* eslint-disable style/comma-dangle */
2+
exports.icons = {
3+
prefix: 'test-color-icons',
4+
icons: {
5+
about: {
6+
body: '<path fill="#2196F3" d="M37 40H11l-6 6V12c0-3.3 2.7-6 6-6h26c3.3 0 6 2.7 6 6v22c0 3.3-2.7 6-6 6z"/><g fill="#fff"><path d="M22 20h4v11h-4z"/><circle cx="24" cy="15" r="2"/></g>',
7+
},
8+
},
9+
lastModified: 1672652184,
10+
width: 48,
11+
height: 48,
12+
};
13+
exports.info = {
14+
prefix: 'test-color-icons',
15+
name: 'Test Color Icons',
16+
total: 1,
17+
author: {
18+
name: 'test',
19+
},
20+
license: {
21+
title: 'MIT',
22+
},
23+
samples: ['about'],
24+
height: 32,
25+
displayHeight: 16,
26+
};
27+
exports.metadata = {};
28+
exports.chars = {};

‎playground/@test-scope/test-color-icons/index.mjs‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/* eslint-disable style/comma-dangle */
2+
const icons = {
3+
prefix: 'test-color-icons',
4+
icons: {
5+
about: {
6+
body: '<path fill="#2196F3" d="M37 40H11l-6 6V12c0-3.3 2.7-6 6-6h26c3.3 0 6 2.7 6 6v22c0 3.3-2.7 6-6 6z"/><g fill="#fff"><path d="M22 20h4v11h-4z"/><circle cx="24" cy="15" r="2"/></g>',
7+
},
8+
},
9+
lastModified: 1672652184,
10+
width: 48,
11+
height: 48,
12+
};
13+
14+
const info = {
15+
prefix: 'test-color-icons',
16+
name: 'Test Color Icons',
17+
total: 1,
18+
author: {
19+
name: 'test',
20+
},
21+
license: {
22+
title: 'MIT',
23+
},
24+
samples: ['about'],
25+
height: 32,
26+
displayHeight: 16,
27+
};
28+
29+
const metadata = {};
30+
const chars = {};
31+
export { chars, icons, info, metadata };

‎playground/@test-scope/test-color-icons/package.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"name": "@test-scope/test-color-icons",
3+
"exports": {
4+
"./*": "./*",
5+
".": {
6+
"import": "./index.mjs",
7+
"require": "./index.js"
8+
}
9+
},
10+
"main": "index.js",
11+
"module": "index.mjs",
12+
"types": "index.d.ts"
13+
}

‎playground/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
"@winner-fed/winjs": "*"
1515
},
1616
"devDependencies": {
17+
"@iconify-json/mdi": "^1.2.1",
18+
"@iconify-json/noto-v1": "^1.2.0",
1719
"typescript": "^5.0.3"
1820
}
1921
}

‎playground/plain-color-icons/index.d.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type {
2+
IconifyChars,
3+
IconifyInfo,
4+
IconifyJSON,
5+
IconifyMetaData,
6+
} from '@iconify/types';
7+
8+
export type { IconifyChars, IconifyInfo, IconifyJSON, IconifyMetaData };
9+
10+
export declare const icons: IconifyJSON;
11+
export declare const info: IconifyInfo;
12+
export declare const metadata: IconifyMetaData;
13+
export declare const chars: IconifyChars;

‎playground/plain-color-icons/index.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/* eslint-disable style/comma-dangle */
2+
exports.icons = {
3+
prefix: 'plain-color-icons',
4+
icons: {
5+
about: {
6+
body: '<path fill="#2196F3" d="M37 40H11l-6 6V12c0-3.3 2.7-6 6-6h26c3.3 0 6 2.7 6 6v22c0 3.3-2.7 6-6 6z"/><g fill="#fff"><path d="M22 20h4v11h-4z"/><circle cx="24" cy="15" r="2"/></g>',
7+
},
8+
},
9+
lastModified: 1672652184,
10+
width: 48,
11+
height: 48,
12+
};
13+
exports.info = {
14+
prefix: 'test-color-icons',
15+
name: 'Test Color Icons',
16+
total: 1,
17+
author: {
18+
name: 'test',
19+
},
20+
license: {
21+
title: 'MIT',
22+
},
23+
samples: ['about'],
24+
height: 32,
25+
displayHeight: 16,
26+
};
27+
exports.metadata = {};
28+
exports.chars = {};

0 commit comments

Comments
 (0)