agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-06-22 08:24:59 +00:00
Code Issues Releases Activity

fix: correct handling for icons with palette in Tailwind plugin, plugin demo

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2023-02-06 20:31:55 +02:00
parent 626ac30ca6
commit 0dbc5da8b3
11 changed files with 601 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -167,6 +167,12 @@ Directory `plugins` contains plugins.
| ------------------------------------------ | ------------ |
| [Tailwind CSS plugin](./plugins/tailwind/) | Tailwind CSS |
#### Demo
Directory `plugins-demo` contains demo packages that show usage of plugins.
- [Tailwind demo](./plugins-demo/tailwind-demo/) - demo for Tailwind CSS plugin. Run `npm run build` to build demo, open `src/index.html` in browser to see result.
## Installation, debugging and contributing
See [CONTRIBUTING.md](./CONTRIBUTING.md).

3
plugins-demo/tailwind-demo/.gitignore vendored Normal file
View File

@ -0,0 +1,3 @@
.DS_Store
node_modules
dist

17
plugins-demo/tailwind-demo/package.json Normal file
View File

@ -0,0 +1,17 @@
{
"name": "@iconify-demo/tailwind",
"version": "1.0.0",
"private": true,
"description": "",
"main": "index.js",
"scripts": {
"build": "tailwindcss -i ./src/input.css -o ./dist/output.css"
},
"keywords": [],
"devDependencies": {
"@iconify/tailwind": "workspace:*",
"@iconify-json/mdi-light": "^1.1.5",
"@iconify-json/vscode-icons": "^1.1.21",
"tailwindcss": "^3.2.4"
}
}

35
plugins-demo/tailwind-demo/src/index.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="../dist/output.css" rel="stylesheet" />
</head>
<body class="m-0 p-2">
<p>
Few icons that change color on hover (first icon also changes icon
on hover):
<span class="text-3xl demo">
<span
class="icon-[mdi-light--arrow-left] hover:icon-hover-[mdi-light--arrow-right]"
></span>
<span class="icon-[mdi-light--forum]"></span>
</span>
</p>
<p>
Icons with hardcoded palette:
<span class="text-3xl demo">
<span
class="icon-[vscode-icons--file-type-access] hover:icon-hover-[vscode-icons--file-type-access2]"
></span>
<span class="icon-[vscode-icons--file-type-vue]"></span>
</span>
</p>
<p>
Clean selector:
<span
class="icon--mdi-light icon--mdi-light--home text-3xl demo"
></span>
</p>
</body>
</html>

11
plugins-demo/tailwind-demo/src/input.css Normal file
View File

@ -0,0 +1,11 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
.demo {
color: #16a34a;
vertical-align: -6px;
}
.demo:hover {
color: #b91c1c;
}

20
plugins-demo/tailwind-demo/tailwind.config.js Normal file
View File

@ -0,0 +1,20 @@
const {
addCleanIconSelectors,
addDynamicIconSelectors,
} = require('@iconify/tailwind');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/*.html'],
plugins: [
// Plugin with clean selectors: requires writing all used icons in first parameter
addCleanIconSelectors(['mdi-light:home']),
// Plugin with dynamic selectors
addDynamicIconSelectors(),
// Plugin with dynamic selectors that contains only css for overriding icon
addDynamicIconSelectors({
prefix: 'icon-hover',
overrideOnly: true,
}),
],
};

2
plugins/tailwind/package.json
View File

@ -2,7 +2,7 @@
"name": "@iconify/tailwind",
"description": "Iconify plugin for Tailwind CSS",
"author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)",
"version": "0.1.0",
"version": "0.1.1",
"license": "MIT",
"main": "./dist/plugin.js",
"types": "./dist/plugin.d.ts",

2
plugins/tailwind/src/dynamic.ts
View File

@ -16,7 +16,7 @@ export function getDynamicCSSRules(
}
const [prefix, name] = nameParts;
if (!prefix.match(matchIconName) || !name.match(matchIconName)) {
if (!(prefix.match(matchIconName) && name.match(matchIconName))) {
throw new Error(`Invalid icon name: "${icon}"`);
}

54
plugins/tailwind/src/loader.ts
View File

@ -21,18 +21,32 @@ export interface IconifyPluginLoaderOptions {
/**
* Locate icon set
*/
interface LocatedIconSet {
main: string;
info?: string;
}
export function locateIconSet(
prefix: string,
options: IconifyPluginLoaderOptions
): string | undefined {
): LocatedIconSet | undefined {
if (options.files?.[prefix]) {
return options.files?.[prefix];
return {
main: options.files?.[prefix],
};
}
try {
return require.resolve(`@iconify-json/${prefix}/icons.json`);
const main = require.resolve(`@iconify-json/${prefix}/icons.json`);
const info = require.resolve(`@iconify-json/${prefix}/info.json`);
return {
main,
info,
};
} catch {}
try {
return require.resolve(`@iconify/json/json/${prefix}.json`);
const main = require.resolve(`@iconify/json/json/${prefix}.json`);
return {
main,
};
} catch {}
}
@ -66,17 +80,25 @@ export function loadIconSet(
}
const filename = options.files?.[prefix] || locateIconSet(prefix, options);
if (filename) {
// Check for cache
if (cache[filename]) {
return cache[filename];
}
// Attempt to load it
try {
const result = JSON.parse(readFileSync(filename, 'utf8'));
cache[filename] = result;
return result;
} catch {}
if (!filename) {
return;
}
const main = typeof filename === 'string' ? filename : filename.main;
// Check for cache
if (cache[main]) {
return cache[main];
}
// Attempt to load it
try {
const result = JSON.parse(readFileSync(main, 'utf8'));
if (!result.info && typeof filename === 'object' && filename.info) {
// Load info from a separate file
result.info = JSON.parse(readFileSync(filename.info, 'utf8'));
}
cache[main] = result;
return result;
} catch {}
}

717
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

1
pnpm-workspace.yaml
View File

@ -9,4 +9,5 @@ packages:
- 'plugins/*'
- 'components-demo/*'
- 'iconify-icon-demo/*'
- 'plugins-demo/*'
# - 'debug/*'