Add Prettier and run it against the project

.github/workflows/prepare-release.yml

@@ -15,7 +15,7 @@ permissions:
 jobs:
   build:
     permissions:
-      contents: write  # for softprops/action-gh-release to create GitHub release
+      contents: write # for softprops/action-gh-release to create GitHub release
 
     runs-on: ubuntu-latest
 

.github/workflows/release-insiders.yml

@@ -44,13 +44,13 @@ jobs:
         run: |
           echo "SHA_SHORT=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
 
-      - name: "Version `heroicons` based on commit: 0.0.0-insiders.${{ env.SHA_SHORT }}"
+      - name: 'Version `heroicons` based on commit: 0.0.0-insiders.${{ env.SHA_SHORT }}'
         run: npm version 0.0.0-insiders.${{ env.SHA_SHORT }} --force --no-git-tag-version
 
-      - name: "Version `@heroicons/react` based on commit: 0.0.0-insiders.${{ env.SHA_SHORT }}"
+      - name: 'Version `@heroicons/react` based on commit: 0.0.0-insiders.${{ env.SHA_SHORT }}'
         run: npm version 0.0.0-insiders.${{ env.SHA_SHORT }} --force --no-git-tag-version --prefix react
 
-      - name: "Version `@heroicons/vue` based on commit: 0.0.0-insiders.${{ env.SHA_SHORT }}"
+      - name: 'Version `@heroicons/vue` based on commit: 0.0.0-insiders.${{ env.SHA_SHORT }}'
         run: npm version 0.0.0-insiders.${{ env.SHA_SHORT }} --force --no-git-tag-version --prefix vue
 
       - name: Publish `heroicons`

.github/workflows/release.yml

@@ -45,16 +45,16 @@ jobs:
           echo "RELEASE_CHANNEL=$(npm run release-channel --silent)" >> $GITHUB_ENV
 
       - name: Publish `heroicons`
-        run: npm publish --tag ${{ env.RELEASE_CHANNEL }}  
+        run: npm publish --tag ${{ env.RELEASE_CHANNEL }}
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Publish `@heroicons/react`
-        run: npm publish ./react --tag ${{ env.RELEASE_CHANNEL }}  
+        run: npm publish ./react --tag ${{ env.RELEASE_CHANNEL }}
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Publish `@heroicons/vue`
-        run: npm publish ./vue --tag ${{ env.RELEASE_CHANNEL }}  
+        run: npm publish ./vue --tag ${{ env.RELEASE_CHANNEL }}
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -15,19 +15,23 @@
   <a href="https://heroicons.com"><strong>Browse at Heroicons.com &rarr;</strong></a>
 </p>
 
-
 <p align="center">
     <a href="https://github.com/tailwindlabs/heroicons/releases"><img src="https://img.shields.io/npm/v/heroicons" alt="Latest Release"></a>
     <a href="https://github.com/tailwindlabs/heroicons/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/heroicons.svg" alt="License"></a>
 </p>
 
-
 ## Basic Usage
 
 The quickest way to use these icons is to simply copy the source for the icon you need from [heroicons.com](https://heroicons.com) and inline it directly into your HTML:
 
 ```html
-<svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+<svg
+  class="h-6 w-6 text-gray-500"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke="currentColor"
+  stroke-width="2"
+>
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
@@ -54,7 +58,7 @@ import { BeakerIcon } from '@heroicons/react/24/solid'
 function MyComponent() {
   return (
     <div>
-      <BeakerIcon className="h-6 w-6 text-blue-500"/>
+      <BeakerIcon className="h-6 w-6 text-blue-500" />
       <p>...</p>
     </div>
   )
@@ -67,10 +71,9 @@ Icons use an upper camel case naming convention and are always suffixed with the
 
 [Browse the full list of icon names on UNPKG &rarr;](https://unpkg.com/browse/@heroicons/react/24/outline/)
 
-
 ## Vue
 
-*Note that this library currently only supports Vue 3.*
+_Note that this library currently only supports Vue 3._
 
 First, install `@heroicons/vue` from npm:
 
@@ -83,7 +86,7 @@ Now each icon can be imported individually as a Vue component:
 ```vue
 <template>
   <div>
-    <BeakerIcon class="h-6 w-6 text-blue-500"/>
+    <BeakerIcon class="h-6 w-6 text-blue-500" />
     <p>...</p>
   </div>
 </template>

package.json

@@ -26,6 +26,7 @@
     "@svgr/core": "^5.5.0",
     "@vue/compiler-dom": "^3.0.5",
     "camelcase": "^6.0.0",
+    "prettier": "^2.8.7",
     "rimraf": "^3.0.2",
     "svgo": "^1.3.2"
   }

prettier.config.js

@@ -2,4 +2,4 @@ module.exports = {
   singleQuote: true,
   semi: false,
   printWidth: 100,
-};
+}

scripts/build.js

@@ -121,43 +121,43 @@ async function buildExports(styles) {
   }
 
   // For those that want to read the version from package.json
-  pkg[`./package.json`] = { "default": "./package.json" }
+  pkg[`./package.json`] = { default: './package.json' }
 
   // Backwards compatibility with v1 imports (points to proxy that prints an error message):
-  pkg["./outline"] = { "default": "./outline/index.js" }
-  pkg["./outline/index"] = { "default": "./outline/index.js" }
-  pkg["./outline/index.js"] = { "default": "./outline/index.js" }
-  pkg["./solid"] = { "default": "./solid/index.js" }
-  pkg["./solid/index"] = { "default": "./solid/index.js" }
-  pkg["./solid/index.js"] = { "default": "./solid/index.js" }
+  pkg['./outline'] = { default: './outline/index.js' }
+  pkg['./outline/index'] = { default: './outline/index.js' }
+  pkg['./outline/index.js'] = { default: './outline/index.js' }
+  pkg['./solid'] = { default: './solid/index.js' }
+  pkg['./solid/index'] = { default: './solid/index.js' }
+  pkg['./solid/index.js'] = { default: './solid/index.js' }
 
   // Explicit exports for each style:
   for (let style of styles) {
     pkg[`./${style}`] = {
-      "types": `./${style}/index.d.ts`,
-      "import": `./${style}/index.js`,
-      "require": `./${style}/index.js`
+      types: `./${style}/index.d.ts`,
+      import: `./${style}/index.js`,
+      require: `./${style}/index.js`,
     }
     pkg[`./${style}/*`] = {
-      "types": `./${style}/*.d.ts`,
-      "import": `./${style}/esm/*.js`,
-      "require": `./${style}/*.js`
+      types: `./${style}/*.d.ts`,
+      import: `./${style}/esm/*.js`,
+      require: `./${style}/*.js`,
     }
     pkg[`./${style}/*.js`] = {
-      "types": `./${style}/*.d.ts`,
-      "import": `./${style}/esm/*.js`,
-      "require": `./${style}/*.js`
+      types: `./${style}/*.d.ts`,
+      import: `./${style}/esm/*.js`,
+      require: `./${style}/*.js`,
     }
 
     // This dir is basically an implementation detail, but it's needed for
     // backwards compatibility in case people were importing from it directly.
     pkg[`./${style}/esm/*`] = {
-      "types": `./${style}/*.d.ts`,
-      "import": `./${style}/esm/*.js`
+      types: `./${style}/*.d.ts`,
+      import: `./${style}/esm/*.js`,
     }
     pkg[`./${style}/esm/*.js`] = {
-      "types": `./${style}/*.d.ts`,
-      "import": `./${style}/esm/*.js`
+      types: `./${style}/*.d.ts`,
+      import: `./${style}/esm/*.js`,
     }
   }
 
@@ -193,11 +193,7 @@ async function main(package) {
 
   let packageJson = JSON.parse(await fs.readFile(`./${package}/package.json`, 'utf8'))
 
-  packageJson.exports = await buildExports([
-    '20/solid',
-    '24/outline',
-    '24/solid',
-  ])
+  packageJson.exports = await buildExports(['20/solid', '24/outline', '24/solid'])
 
   await ensureWriteJson(`./${package}/package.json`, packageJson)