chore: release 2.0.0

.github/workflows/publish.yml

@@ -8,21 +8,34 @@ on:
 jobs:
  publish-npm:
  if: "contains(github.event.head_commit.message, 'release')"
- runs-on: ubuntu-latest
+ runs-on: ${{matrix.os}}
+
+ strategy:
+ matrix:
+ os: [ubuntu-latest]
+ node-version: [16.x]
+ fail-fast: false
+
  steps:
  - name: Checkout
  uses: actions/checkout@v2
 
- - name: use Node.js 14
- uses: actions/setup-node@v1
+ - name: Install pnpm
+ uses: pnpm/action-setup@v2.0.1
+ with:
+ version: 6.28.0
+
+ - name: Use Node.js ${{ matrix.node-version }}
+ uses: actions/setup-node@v2
  with:
+ node-version: ${{ matrix.node-version }}
  registry-url: https://registry.npmjs.org/
- node-version: 14
+ cache: 'pnpm'
 
- - name: npm install and publish
- run: |
- npm install
- npm publish
+ - name: Install Dependencies
+ run: pnpm install
 
+ - name: Publish to NPM
+ run: pnpm -r publish --access public --no-git-checks
  env:
  NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.github/workflows/release.yml

@@ -8,7 +8,13 @@ on:
 jobs:
  build:
  name: Create Release
- runs-on: ubuntu-latest
+ runs-on: ${{matrix.os}}
+
+ strategy:
+ matrix:
+ os: [ubuntu-latest]
+ fail-fast: false
+
  steps:
  - name: Checkout code
  uses: actions/checkout@master
@@ -22,7 +28,3 @@ jobs:
  tag_name: ${{ github.ref }}
  body: |
  Please refer to [CHANGELOG.md](https://github.com/anncwb/vite-plugin-svg-icons/blob/main/CHANGELOG.md) for details.
- # - name: npm install and create changeLog
- # run: |
- # npm install
- # npm run log

.github/workflows/test.yml

@@ -0,0 +1,40 @@
+name: Test
+
+on:
+ push:
+ branches:
+ - main
+
+ pull_request:
+ branches:
+ - main
+
+jobs:
+ build:
+ runs-on: ${{ matrix.os }}
+
+ strategy:
+ matrix:
+ node-version: [16.x]
+ os: [ubuntu-latest]
+ fail-fast: false
+
+ steps:
+ - uses: actions/checkout@v2
+
+ - name: Install pnpm
+ uses: pnpm/action-setup@v2.0.1
+ with:
+ version: 6.28.0
+
+ - name: Use Node.js ${{ matrix.node-version }}
+ uses: actions/setup-node@v2
+ with:
+ node-version: ${{ matrix.node-version }}
+ registry-url: https://registry.npmjs.org/
+ cache: 'pnpm'
+
+ - run: pnpm install
+
+ - name: Test
+ run: pnpm run test

CHANGELOG.md

@@ -1,3 +1,18 @@
+# [2.0.0](https://github.com/anncwb/vite-plugin-svg-icons/compare/v1.0.1...v2.0.0) (2022-01-28)
+
+### Bug Fixes
+
+- loadSvg time ([25ccc89](https://github.com/anncwb/vite-plugin-svg-icons/commit/25ccc89232cb16e5254f2c15e742a54867b71d35))
+- parse error handling，close [#38](https://github.com/anncwb/vite-plugin-svg-icons/issues/38) ([5021fb8](https://github.com/anncwb/vite-plugin-svg-icons/commit/5021fb85e438afd84348370c5df322db18742d96))
+- run error ([66cbae4](https://github.com/anncwb/vite-plugin-svg-icons/commit/66cbae402c4d168aee19054c537ddb08c82e57ed))
+
+### Features
+
+- ✨ support async load ([e17036d](https://github.com/anncwb/vite-plugin-svg-icons/commit/e17036d23a82ba0a240a033ca9b2825c92b7ed27))
+- add react guide ([40d88b1](https://github.com/anncwb/vite-plugin-svg-icons/commit/40d88b100fa79922ad401c1e1a7e08ead58957c1))
+- added inject parameter to specify the svgDom insertion position, close [#36](https://github.com/anncwb/vite-plugin-svg-icons/issues/36) ([8fb0ad7](https://github.com/anncwb/vite-plugin-svg-icons/commit/8fb0ad77ed5fbefdc124b3a8ccaaa2d8d28e8d09))
+- support typescript,close [#22](https://github.com/anncwb/vite-plugin-svg-icons/issues/22) ([b56a491](https://github.com/anncwb/vite-plugin-svg-icons/commit/b56a4912203f0a784d0ce1e9cf59d0a9e224d6d0))
+
 ## [1.0.5](https://github.com/anncwb/vite-plugin-svg-icons/compare/v0.4.1...v1.0.5) (2021-09-27)
 
 ### Bug Fixes

README.md

@@ -30,27 +30,40 @@ npm i vite-plugin-svg-icons -D
 - Configuration plugin in vite.config.ts
 
 ```ts
-import viteSvgIcons from 'vite-plugin-svg-icons';
-import path from 'path';
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import path from 'path'
 
 export default () => {
  return {
  plugins: [
- viteSvgIcons({
+ createSvgIconsPlugin({
  // Specify the icon folder to be cached
  iconDirs: [path.resolve(process.cwd(), 'src/icons')],
  // Specify symbolId format
  symbolId: 'icon-[dir]-[name]',
+
+ /**
+ * custom insert position
+ * @default: body-last
+ */
+ inject?: 'body-last' | 'body-first'
+
+ /**
+ * custom dom id
+ * @default: __svg__icons__dom__
+ */
+ customDomId: '__svg__icons__dom__',
  }),
  ],
- };
-};
+ }
+}
+
 ```
 
 - Introduce the registration script in src/main.ts
 
 ```ts
-import 'virtual:svg-icons-register';
+import 'virtual:svg-icons-register'
 ```
 
 Here the svg sprite map has been generated
@@ -69,29 +82,29 @@ Here the svg sprite map has been generated
 </template>
 
 <script>
- import { defineComponent, computed } from 'vue';
-
- export default defineComponent({
- name: 'SvgIcon',
- props: {
- prefix: {
- type: String,
- default: 'icon',
- },
- name: {
- type: String,
- required: true,
- },
- color: {
- type: String,
- default: '#333',
- },
+import { defineComponent, computed } from 'vue'
+
+export default defineComponent({
+ name: 'SvgIcon',
+ props: {
+ prefix: {
+ type: String,
+ default: 'icon',
  },
- setup(props) {
- const symbolId = computed(() => `#${props.prefix}-${props.name}`);
- return { symbolId };
+ name: {
+ type: String,
+ required: true,
  },
- });
+ color: {
+ type: String,
+ default: '#333',
+ },
+ },
+ setup(props) {
+ const symbolId = computed(() => `#${props.prefix}-${props.name}`)
+ return { symbolId }
+ },
+})
 </script>
 ```
 
@@ -119,13 +132,13 @@ Here the svg sprite map has been generated
 </template>
 
 <script>
- import { defineComponent, computed } from 'vue';
+import { defineComponent, computed } from 'vue'
 
- import SvgIcon from './components/SvgIcon.vue';
- export default defineComponent({
-  name: 'App',
-  components: { SvgIcon },
- });
+import SvgIcon from './components/SvgIcon.vue'
+export default defineComponent({
+ name: 'App',
+ components: { SvgIcon },
+})
 </script>
 ```
 
@@ -134,14 +147,19 @@ Here the svg sprite map has been generated
 `/src/components/SvgIcon.jsx`
 
 ```jsx
-export default function SvgIcon({ name, prefix = 'icon', color = '#333', ...props }) {
- const symbolId = `#${prefix}-${name}`;
+export default function SvgIcon({
+ name,
+ prefix = 'icon',
+ color = '#333',
+ ...props
+}) {
+ const symbolId = `#${prefix}-${name}`
 
  return (
  <svg {...props} aria-hidden="true">
  <use href={symbolId} fill={color} />
  </svg>
- );
+ )
 }
 ```
 
@@ -159,7 +177,7 @@ export default function SvgIcon({ name, prefix = 'icon', color = '#333', ...prop
 `/src/App.jsx`
 
 ```jsx
-import SvgIcon from './components/SvgIcon';
+import SvgIcon from './components/SvgIcon'
 
 export default function App() {
  return (
@@ -169,24 +187,26 @@ export default function App() {
  <SvgIcon name="icon1"></SvgIcon>
  <SvgIcon name="dir-icon1"></SvgIcon>
  </>
- );
+ )
 }
 ```
 
 ### Get all SymbolId
 
 ```ts
-import ids from 'virtual:svg-icons-names';
+import ids from 'virtual:svg-icons-names'
 // => ['icon-icon1','icon-icon2','icon-icon3']
 ```
 
 ### Options
 
-| Parameter | Type | Default | Description |
-| --- | --- | --- | --- |
-| iconDirs | `string[]` | - | Need to generate the icon folder of the Sprite image |
-| symbolId | `string` | `icon-[dir]-[name]` | svg symbolId format, see the description below |
-| svgoOptions | `boolean｜SvgoOptions` | `true` | svg compression configuration, can be an object[Options](https://github.com/svg/svgo) |
+| Parameter | Type | Default | Description |
+| ----------- | ---------------------- | --------------------- | ------------------------------------------------------------------------------------- |
+| iconDirs | `string[]` | - | Need to generate the icon folder of the Sprite image |
+| symbolId | `string` | `icon-[dir]-[name]` | svg symbolId format, see the description below |
+| svgoOptions | `boolean｜SvgoOptions` | `true` | svg compression configuration, can be an object[Options](https://github.com/svg/svgo) |
+| inject | `string` | `body-last` | svgDom default insertion position, optional `body-first` |
+| customDomId | `string` | `__svg__icons__dom__` | Customize the ID of the svgDom insert node |
 
 **symbolId**
 
@@ -215,6 +235,19 @@ Then the generated SymbolId is written in the comment
 - dir/dir2/icon1.svg # icon-dir-dir2-icon1
 ```
 
+## Typescript Support
+
+If using `Typescript`, you can add in `tsconfig.json`
+
+```json
+// tsconfig.json
+{
+ "compilerOptions": {
+ "types": ["vite-plugin-svg-icons/client"]
+ }
+}
+```
+
 **Note**
 
 Although the use of folders to distinguish between them can largely avoid the problem of duplicate names, there will also be svgs with multiple folders and the same file name in `iconDirs`.
@@ -227,11 +260,10 @@ This needs to be avoided by the developer himself
 
 ```bash
 
-cd ./example
-
-yarn install
-
-yarn dev
+pnpm install
+cd ./packages/playground/basic
+pnpm run dev
+pnpm run build
 
 ```