init

Author: vnphanquang

.changeset/config.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "https://unpkg.com/@changesets/config@2.1.0/schema.json",
+	"changelog": [
+		"@changesets/changelog-github",
+		{ "repo": "vnphanquang/phosphor-icons-tailwindcss" }
+	],
+	"commit": false,
+	"fixed": [],
+	"linked": [],
+	"access": "public",
+	"baseBranch": "main",
+	"updateInternalDependencies": "patch",
+	"ignore": []
+}

.changeset/unlucky-zebras-play.md

@@ -0,0 +1,5 @@
+---
+'phosphor-icons-tailwindcss': major
+---
+
+here be dragons

.editorconfig

@@ -0,0 +1,20 @@
+# Editor configuration, see https://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = tab
+indent_size = 2
+trim_trailing_whitespace = true
+max_line_length = 100
+
+[*.md]
+indent_size = 4
+
+[*.yaml]
+indent_size = 2
+indent_style = space
+

.github/FUNDING.yaml

@@ -0,0 +1 @@
+github: vnphanquang

.github/workflows/changesets.yaml

@@ -0,0 +1,49 @@
+name: Changesets
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - '.changeset/**'
+      - '.github/workflows/changesets.yaml'
+  workflow_dispatch:
+
+env:
+  CI: true
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+  HUSKY: 0
+jobs:
+  Version:
+    if: github.repository == 'vnphanquang/phosphor-icons-tailwindcss' # prevents this action from running on forks
+    permissions:
+      contents: write # to create release (changesets/action)
+      id-token: write # OpenID Connect token needed for provenance
+      pull-requests: write # to create pull request (changesets/action)
+    timeout-minutes: 5
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+      - name: Install dependencies
+        run: pnpm install --ignore-scripts --no-frozen-lockfile
+      - name: Create release PR or Publish to npm
+        uses: changesets/action@v1
+        with:
+          version: pnpm ci:version
+          publish: pnpm ci:publish
+          commit: 'chore(release): changesets versioning & publication'
+          title: 'Changesets: Versioning & Publication'
+          createGithubReleases: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -0,0 +1,12 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+*.log*
+

.prettierignore

@@ -0,0 +1,4 @@
+CHANGELOG.md
+node_modules/
+pnpm-lock.yaml
+

CHANGELOG.md

@@ -0,0 +1,122 @@
+<img src="/meta/phosphor-mark-tight-yellow.png" width="128" align="right" />
+
+# phosphor-icons-tailwindcss
+
+A [TailwindCSS] plugin for the [Phosphor icon set][phosphor].
+
+[![MIT][license.badge]][license] [![npm.badge]][npm]
+
+## Installation
+
+1. install package:
+
+	```bash
+	pnpm add -D phosphor-icons-tailwindcss # or via npm, yarn, ...
+	```
+
+2. register the plugin in your `tailwind.config.js`:
+
+	```js
+	// tailwind.config.js
+	import phosphorIcons from "phosphor-icons-tailwindcss";
+
+	/** @type {import("tailwindcss").Config } */
+	export default {
+		plugins: [phosphorIcons()],
+	};
+	```
+
+	Or if you are using Tailwind 4:
+
+	```css
+	/* app.css, or whatever your entry CSS is */
+	@import 'tailwindcss';
+	@plugin 'phosphor-icons-tailwindcss';
+	```
+
+## Usage
+
+You need to add two classes to your markup:
+
+1. the base `ph` class,
+2. a class with the syntax: `ph-[<name><--weight>]`, corresponding to your desired icon.
+
+> [!NOTE]
+> `weight` is optional and defaults to "regular" if not specified.
+
+For example:
+
+```html
+<p>
+	<i class="ph ph-[info]"></i> <!-- render the regular info icon -->
+	<i class="ph ph-[pulse--duotone]"></i> <!-- render the pulse icon in duotone weight -->
+</p>
+```
+
+For all available icon names and weight, visit [phosphoricons.com][phosphor].
+
+The output CSS look something like this:
+
+```css
+.ph {
+	--ph-url: none;
+	width: 1em;
+	height: 1em;
+	background-color: currentcolor;
+	color: inherit;
+	mask-image: var(--ph-url);
+	mask-size: 100% 100%;
+	mask-repeat: no-repeat;
+}
+
+.ph-\[info\] {
+	url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0xMjgsMjRBMTA0LDEwNCwwLDEsMCwyMzIsMTI4LDEwNC4xMSwxMDQuMTEsMCwwLDAsMTI4LDI0Wm0wLDE5MmE4OCw4OCwwLDEsMSw4OC04OEE4OC4xLDg4LjEsMCwwLDEsMTI4LDIxNlptMTYtNDBhOCw4LDAsMCwxLTgsOCwxNiwxNiwwLDAsMS0xNi0xNlYxMjhhOCw4LDAsMCwxLDAtMTYsMTYsMTYsMCwwLDEsMTYsMTZ2NDBBOCw4LDAsMCwxLDE0NCwxNzZaTTExMiw4NGExMiwxMiwwLDEsMSwxMiwxMkExMiwxMiwwLDAsMSwxMTIsODRaIi8+PC9zdmc+);
+}
+```
+
+## Configuration
+
+You may pass a configuration object to the plugin to customize the generated CSS. The following
+shows the default configuration:
+
+```js
+// tailwind.config.js
+import phosphorIcons from "phosphor-icons-tailwindcss";
+
+/** @type {import("tailwindcss").Config } */
+export default {
+	plugins: [phosphorIcons({
+		prefix: 'ph', // for the icon classes
+		customProperty: '--ph-url',
+	})],
+};
+```
+
+Similarly, for Tailwind 4:
+
+```css
+@import 'tailwindcss';
+@plugin 'phosphor-icons-tailwindcss' {
+	prefix: ph;
+	customProperty: --ph-url;
+}
+```
+
+## Why `ph-[info]` and not `ph-info`?
+
+You may notice this library utilizes Tailwind's support for [arbitrary value](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values), i.e `ph-[info]` instead of `ph-info` to map to the regular info icon. This is to avoid unnecessary parsing during development, especially for [Taliwind language server](https://github.com/tailwindlabs/tailwindcss-intellisense). Arbitrary value syntax allows only parsing the icons actually being used. Otherwise, parsing 9000+ icons may cause slow-down that negatively impacts developer experience.
+
+## Acknowledgements
+
+You may find [@iconify/tailwindcss](https://iconify.design/docs/usage/css/tailwind/) helpful if you
+are already using the [iconify](https://iconify.design/) ecosystem in your codebase.
+
+`phosphor-icons-tailwindcss` tries to stay minimal by only covering [Phosphor] icons, and it references directly [@phosphor-icons/core](https://github.com/phosphor-icons/core) for the SVG assets.
+
+[phosphor]: https://phosphoricons.com
+[tailwindcss]: https://tailwindcss.com
+<!-- header badges -->
+[license.badge]: https://img.shields.io/badge/license-MIT-blue.svg
+[license]: ./LICENSE
+[npm.badge]: https://img.shields.io/npm/v/phosphor-icons-tailwindcss/qr
+[npm]: https://www.npmjs.com/package/phosphor-icons-tailwindcss/qr

README.md

@@ -0,0 +1,3 @@
+import vnphanquang from '@vnphanquang/eslint-config';
+
+export default vnphanquang;