@iconify/tailwind - npm Package Compare versions

Comparing version 0.0.1-dev to 0.0.1

dist/plugin.js

@@ -10,3 +10,3 @@ /**
 * @license MIT
-* @version 0.0.1-dev
+* @version 0.0.1
 */
@@ -357,3 +357,3 @@ 'use strict';
     if (typeof icons === 'string') {
-        iconNames = icons.split(/[\s,]/);
+        iconNames = icons.split(/[\s,.]/);
     }
@@ -364,3 +364,3 @@ else if (icons instanceof Array) {
         icons.forEach((item) => {
-            item.split(/[\s,]/).forEach((name) => iconNames.push(name));
+            item.split(/[\s,.]/).forEach((name) => iconNames.push(name));
         });
@@ -374,2 +374,5 @@ }
         iconNames.forEach((icon) => {
+            if (!icon.trim()) {
+                return;
+            }
             // Attempt prefix:name split
@@ -413,2 +416,5 @@ const nameParts = icon.split(':');
         const iconSet = loadIconSet(prefix);
+        if (!iconSet) {
+            throw new Error(`Cannot load icon set for "${prefix}"`);
+        }
         const generated = getIconsCSSData(iconSet, Array.from(prefixes[prefix]), options);
@@ -415,0 +421,0 @@ const result = generated.common

lib/iconify.js

@@ -47,3 +47,3 @@ import { readFileSync } from 'fs';
     if (typeof icons === 'string') {
-        iconNames = icons.split(/[\s,]/);
+        iconNames = icons.split(/[\s,.]/);
     }
@@ -54,3 +54,3 @@ else if (icons instanceof Array) {
         icons.forEach((item) => {
-            item.split(/[\s,]/).forEach((name) => iconNames.push(name));
+            item.split(/[\s,.]/).forEach((name) => iconNames.push(name));
         });
@@ -64,2 +64,5 @@ }
         iconNames.forEach((icon) => {
+            if (!icon.trim()) {
+                return;
+            }
             // Attempt prefix:name split
@@ -103,2 +106,5 @@ const nameParts = icon.split(':');
         const iconSet = loadIconSet(prefix);
+        if (!iconSet) {
+            throw new Error(`Cannot load icon set for "${prefix}"`);
+        }
         const generated = getIconsCSSData(iconSet, Array.from(prefixes[prefix]), options);
@@ -105,0 +111,0 @@ const result = generated.common

license.txt

 MIT License
 
-Copyright (c) 2022 Vjacheslav Trushkin / Iconify OÜ
+Copyright (c) 2023 Vjacheslav Trushkin / Iconify OÜ
 
@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

package.json

@@ -5,5 +5,5 @@ {
   "author": "Vjacheslav Trushkin <[e-mail]> (https://iconify.design)",
-  "version": "0.0.1-dev",
+  "version": "0.0.1",
   "license": "MIT",
-  "main": "./dist/plugin.cjs",
+  "main": "./dist/plugin.js",
   "types": "./dist/plugin.d.ts",
@@ -10,0 +10,0 @@ "bugs": "https://github.com/iconify/iconify/issues",

README.md

@@ -5,4 +5,86 @@ # Iconify for Tailwind CSS
 
-TODO....
+[Browse icons at Iconify](https://icon-sets.iconify.design/) to see all icons.
 
+## Usage
+
+1. Install packages icon sets.
+2. In `tailwind.config.js` import plugin and specify list of icons you want to load.
+
+## HTML
+
+To use icon in HTML, it is as easy as adding 2 class names:
+
+-   Class name for icon set.
+-   Class name for icon.
+
+```html
+<span class="icon--mdi icon--mdi--home"></span>
+```
+
+Why 2 class names? It reduces duplication and makes it easy to change all icons from one icon set.
+
+You can change that with options: you can change class names format, you can disable common selector. See [options for function used by plugin](https://docs.iconify.design/tools/utils/get-icons-css.html).
+
+### Color, size, alignment
+
+To change icon size or color, change font size or text color, like you would with any text.
+
+Icon color cannot be changed for icons with hardcoded palette, such as most emoji sets or flag icons.
+
+To align icon below baseline, add negative vertical alignment, like this (you can also use Tailwind class for that):
+
+```html
+<span class="icon--mdi icon--mdi--home" style="vertical-align: -0.125em"></span>
+```
+
+## Installing icon sets
+
+Plugin does not include icon sets. You need to install icon sets separately.
+
+To install all 100k+ icons, install `@iconify/json` as a dev dependency.
+
+If you do not want to install big package, install `@iconify-json/` packages for icon sets that you use.
+
+See [Iconify icon sets](https://icon-sets.iconify.design/) for list of available icon sets and icons.
+
+See [Iconify documentation](https://docs.iconify.design/icons/json.html) for list of packages.
+
+## Tailwind config
+
+Then you need to add and configure plugin.
+
+Add this to `tailwind.config.js`:
+
+```js
+const iconifyPlugin = require('@iconify/tailwind');
+```
+
+Then in plugins section add `iconifyPlugin` with list of icons you want to load.
+
+Example:
+
+```js
+module.exports = {
+	content: ['./src/*.html'],
+	theme: {
+		extend: {},
+	},
+	plugins: [
+		// Iconify plugin with list of icons you need
+		iconifyPlugin(['mdi:home', 'mdi-light:account']),
+	],
+	presets: [],
+};
+```
+
+### Icon names
+
+Unfortunately Tailwind CSS cannot dynamically find all icon names. You need to specify list of icons you want to use.
+
+### Options
+
+Plugin accepts options as a second parameter. You can use it to change selectors.
+
+See [documentation for function used by plugin](https://docs.iconify.design/tools/utils/get-icons-css.html) for list of options.
+
 ## License
@@ -9,0 +91,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

77039

increased by3.75%

Lines of code

1464

increased by0.83%

Number of lines in readme file

99

increased by482.35%

No dependency changes