chore(deps): update dependency tsbb to v4 #18

jaywcjlove/tsbb#439
uiwjs · Mar 29, 2023 · baf1cf3 · baf1cf3
1 parent ce45255
commit baf1cf3
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 75 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -7,79 +7,83 @@ jobs:
   build-deploy:
     runs-on: ubuntu-18.04
     steps:
-    - uses: actions/checkout@v2
-      with:
-        submodules: true
-    - uses: actions/setup-node@v2
-      with:
-        node-version: 14
+      - uses: actions/checkout@v3
+        with:
+          submodules: true
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: 'https://registry.npmjs.org'
 
-    - run: npm install
-    - run: npm run font
-    - run: npm run build
-    - run: npm run copy
-    - run: rm -rf fonts/react
-    - run: cp lib/*js ./
-    - run: mkdir icon
-    - run: cp icons/icons/*svg ./icon
-    - run: rm -rf index.js
-    - run: ls -al
+      - run: npm install
+      - run: npm run font
+      - run: npm run copy:svg 
+      - run: npm run copy
+      - run: npm run build
+      - run: rm -rf fonts/react
+      - run: cp lib/*.js ./
+      - run: cp lib/*.d.ts ./
+      - run: mkdir icon
+      - run: cp icons/icons/*svg ./icon
+      - run: rm -rf index.js
+      - run: ls -al
 
-    - name: Generate Contributors Images
-      uses: jaywcjlove/github-action-contributors@main
-      with:
-        filter-author: (renovate\[bot\]|renovate-bot|dependabot\[bot\])
-        output: fonts/CONTRIBUTORS.svg
-        avatarSize: 42
+      - name: Generate Contributors Images
+        uses: jaywcjlove/github-action-contributors@main
+        with:
+          filter-author: (renovate\[bot\]|renovate-bot|dependabot\[bot\])
+          output: fonts/CONTRIBUTORS.svg
+          avatarSize: 42
 
-    - name: Create Tag
-      id: create_tag
-      uses: jaywcjlove/create-tag-action@v1.3.6
-      with:
-        package-path: ./package.json
+      - name: Create Tag
+        id: create_tag
+        uses: jaywcjlove/create-tag-action@main
+        with:
+          package-path: ./package.json
 
-    - name: get tag version
-      id: tag_version
-      uses: jaywcjlove/changelog-generator@v1.5.0
+      - name: get tag version
+        id: tag_version
+        uses: jaywcjlove/changelog-generator@main
 
-    - name: Deploy
-      uses: peaceiris/actions-gh-pages@v3
-      with:
-        commit_message: ${{steps.tag_version.outputs.tag}} ${{ github.event.head_commit.message }}
-        github_token: ${{ secrets.GITHUB_TOKEN }}
-        publish_dir: ./fonts
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          commit_message: ${{steps.tag_version.outputs.tag}} ${{ github.event.head_commit.message }}
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./fonts
 
-    - name: Generate Changelog
-      id: changelog
-      uses: jaywcjlove/changelog-generator@v1.5.0
-      with:
-        head-ref: ${{steps.create_tag.outputs.version}}
-        filter-author: (jaywcjlove|小弟调调™|dependabot\[bot\]|Renovate Bot)
-        filter: '[R|r]elease[d]\s+[v|V]\d(\.\d+){0,2}'
+      - name: Generate Changelog
+        id: changelog
+        uses: jaywcjlove/changelog-generator@main
+        with:
+          head-ref: ${{steps.create_tag.outputs.version}}
+          filter-author: (jaywcjlove|小弟调调™|dependabot\[bot\]|Renovate Bot)
+          filter: '[R|r]elease[d]\s+[v|V]\d(\.\d+){0,2}'
 
-    - name: Create Release
-      uses: ncipollo/release-action@v1
-      if: steps.create_tag.outputs.successful
-      with:
-        token: ${{ secrets.GITHUB_TOKEN }}
-        name: ${{ steps.create_tag.outputs.version }}
-        tag: ${{ steps.create_tag.outputs.version }}
-        body: |
-          [![](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/bootstrap-icons@${{steps.create_tag.outputs.versionNumber}}/file/README.md) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@uiw/bootstrap-icons)](https://bundlephobia.com/result?p=@uiw/bootstrap-icons@${{steps.create_tag.outputs.versionNumber}})
-          
-          Documentation ${{ steps.changelog.outputs.tag }}: https://raw.githack.com/uiwjs/bootstrap-icons/${{ steps.changelog.outputs.gh-pages-short-hash }}/index.html  
-          Comparing Changes: ${{ steps.changelog.outputs.compareurl }} 
-          
-          ```bash
-          npm i @uiw/bootstrap-icons@${{steps.create_tag.outputs.versionNumber}}
-          ```
-          
-          ${{ steps.changelog.outputs.changelog }}
+      - name: Create Release
+        uses: ncipollo/release-action@v1
+        if: steps.create_tag.outputs.successful
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          name: ${{ steps.create_tag.outputs.version }}
+          tag: ${{ steps.create_tag.outputs.version }}
+          body: |
+            [![](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/bootstrap-icons@${{steps.create_tag.outputs.versionNumber}}/file/README.md) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@uiw/bootstrap-icons)](https://bundlephobia.com/result?p=@uiw/bootstrap-icons@${{steps.create_tag.outputs.versionNumber}})
+            
+            Documentation ${{ steps.changelog.outputs.tag }}: https://raw.githack.com/uiwjs/bootstrap-icons/${{ steps.changelog.outputs.gh-pages-short-hash }}/index.html  
+            Comparing Changes: ${{ steps.changelog.outputs.compareurl }} 
+            
+            ```bash
+            npm i @uiw/bootstrap-icons@${{steps.create_tag.outputs.versionNumber}}
+            ```
+            
+            ${{ steps.changelog.outputs.changelog }}
+
+      - run: rm -rf fonts/*.html
+      - run: npm publish --access public
+        name: 📦  @uiw/bootstrap-icons publish to NPM
+        continue-on-error: true
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
-    - run: rm -rf fonts/*.html
-    - name: 📦 @uiw/icons publish to NPM
-      uses: JS-DevTools/npm-publish@v1
-      with:
-        token: ${{ secrets.NPM_TOKEN }}
-        package: ./package.json
 
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,6 @@
 build
+react
+svg
 fonts
 coverage
 cjs

diff --git a/README.md b/README.md
@@ -100,18 +100,66 @@ Support for `.less` and `.css` styles references.
 <i class="btfont-javascript"></i>
 ```
 
-### React
+### Used in React
 
 Icons are used as components. `v1.3.0+` support.
 
 ```jsx
 import { Activity, Wifi } from '@uiw/bootstrap-icons';
-import { Activity } from '@uiw/icons/Activity';
+import { Activity } from '@uiw/bootstrap-icons/Activity';
 
 <Activity style={{ fill: 'red' }} />
 <Wifi height="36" />
 ```
 
+To use SVG images as React components directly, webpack loader support is required.
+
+Install dependencies:
+
+```bash
+yarn add @svgr/webpack file-loader
+```
+
+Configure webpack loader:
+
+```js
+// webpack.config.js
+{
+  test: /\.svg$/,
+  use: [
+    {
+      loader: require.resolve('@svgr/webpack'),
+      options: {
+        prettier: false,
+        svgo: false,
+        svgoConfig: {
+          plugins: [{ removeViewBox: false }],
+        },
+        titleProp: true,
+        ref: true,
+      },
+    },
+    {
+      loader: require.resolve('file-loader'),
+      options: {
+        name: 'static/media/[name].[hash].[ext]',
+      },
+    },
+  ],
+  issuer: {
+    and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
+  },
+},
+```
+
+You can then import the SVG as a React component like this:
+
+```javascript
+import { ReactComponent as ComLogo } from '@uiw/bootstrap-icons/svg/wifi.svg';
+
+<ComLogo />
+```
+
 **Custom Icon Component**
 
 Create an `Icon` component.

diff --git a/package.json b/package.json
@@ -7,16 +7,28 @@
   "types": "./esm/index.d.ts",
   "scripts": {
     "font": "svgtofont --sources icons/icons --output fonts",
-    "copy": "copyfiles -f fonts/react/*.d.ts lib --verbose && copyfiles -f fonts/react/*.d.ts esm --verbose",
-    "build": "tsbb build --entry fonts/react/index.js",
-    "start": "npm run font && npm run build && npm run copy"
+    "copy:svg": "cpy icons/icons/*.svg svg --flat",
+    "copy": "cpy fonts/react/*.js fonts/react/*.d.ts react --flat",
+    "build": "tsbb build react/*.{js,d.ts} --useBabel",
+    "start": "npm run font && npm run copy:svg && npm run copy && npm run build"
   },
   "license": "MIT",
   "author": "Kenny <wowohoo@qq.com>",
   "repository": {
     "type": "git",
     "url": "https://github.com/uiwjs/bootstrap-icons.git"
   },
+  "files": [
+    "lib",
+    "esm",
+    "svg",
+    "*.js",
+    "*.d.ts",
+    "icon",
+    "!icon/react",
+    "!icon/*.html",
+    "fonts"
+  ],
   "keywords": [
     "bootstrap",
     "bootstrap-icons",
@@ -41,8 +53,8 @@
     "base64"
   ],
   "devDependencies": {
-    "copyfiles": "~2.4.1",
-    "svgtofont": "~3.17.6",
-    "tsbb": "~3.7.2"
+    "cpy-cli": "^4.2.0",
+    "svgtofont": "~3.23.0",
+    "tsbb": "^4.0.2"
   }
 }