chore: release 2.0.0

vbenjs · Jan 27, 2022 · 0d69d7e · 0d69d7e
1 parent 1083886
commit 0d69d7e
Show file tree

Hide file tree

Showing 10 changed files with 256 additions and 116 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
diff --git a/.github/workflows/publish.yml b/.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}}
diff --git a/.github/workflows/release.yml b/.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
diff --git a/.github/workflows/test.yml b/.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
diff --git a/CHANGELOG.md b/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

diff --git a/README.md b/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
 
 ```