hexo-tiny

library1.0.2jsnpmunverified

Hexo plugin providing two methods to use the entire 100,000+ icon set from Iconify: inline SVG via the `icon()` helper and CSS mask-image via the `icons()` helper. Current stable version 1.0.0. Requires `@iconify/json`, `@iconify/utils`, and `hexo-fs` (bundled with Hexo). Designed for Hexo blogs; the `icons()` helper injects SVG data URLs into a specified CSS file at build time, avoiding runtime requests. Replaces earlier approaches like `hexo-iconify-beta` and focuses on simplicity and zero runtime overhead.

ecommerce productivity

npm install hexo-tiny

package ↗

INSTALL

IMPORT

SIG · HEXO-TINY

hexo-tiny

ecommercejavascriptv1.0.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

icon

✓ icon('ant-design:home-outlined')

✗ icon('home-outlined')

Requires full Iconify icon name with collection prefix (e.g., 'ant-design:...'). Works as a Hexo helper in templates.

icons

✓ icons('ant-design:home-outlined', 'style.css')

✗ icons('home-outlined', 'style.css')

Second argument is the CSS file relative to theme source. The plugin appends icon definitions to this file. Both `icon` and `icons` are registered as Hexo helpers.

default import

✓ // Not needed; helpers are automatically registered in Hexo

✗ const iconify = require('hexo-iconify')

Do not require/import in theme scripts; helpers are injected by Hexo upon plugin install.

Install hexo-iconify, then use icon() for inline SVG or icons() for CSS mask-image icons in Hexo themes.

1. Install dependencies: npm install hexo-iconify @iconify/json @iconify/utils 2. In your Hexo theme's layout file (e.g., layout.ejs): <span class="menu-icon"><%- icon('ant-design:home-outlined') %></span> 3. In your Hexo theme's CSS file (e.g., main.css), add base styles: .icons { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; background-color: currentcolor; mask: no-repeat center / 100%; mask-image: var(--svg); } 4. In your template, use 'icons' helper with CSS file path: <span class="<%- icons('ph:magnifying-glass', 'css/main.css') %>"></span> 5. Optionally set default CSS file in root _config.yml: iconify: file: 'css/main.css' 6. Run hexo generate to see icons injected.

Debug

Known issues

breakingPlugin registers helpers named 'icon' and 'icons' – conflicts if theme or other plugins already use these names.

fix

Rename conflicting helpers or avoid using those names in your theme.

affects: >=1.0.0

deprecatedOlder version 'hexo-iconify-beta' may have different API; this plugin replaces it.

fix

Upgrade to hexo-iconify@1.0.0 and update helper usage.

affects: <1.0.0

gotchaThe icon name must include the collection prefix (e.g., 'ant-design:home-outlined'); omitting the prefix will cause errors.

fix

Always provide the full name with colon separator, e.g., 'ph:magnifying-glass'.

affects: >=1.0.0

gotchaThe 'icons' helper's second argument (CSS file path) is required unless a default is set in _config.yml.

fix

Provide the file path or set `iconify.file` in root config.

affects: >=1.0.0

gotchaThe plugin modifies the specified CSS file at build time – do not edit the auto-generated portions.

fix

Base class must be defined before the auto-generated rules, and avoid modifying the appended `--svg` rules.

affects: >=1.0.0

Errors

Common errors & fixes

Missing local icon "fa-solid:home"

Icon name is not in @iconify/json

fix

Verify the collection prefix and icon name; use https://icones.netlify.app to find valid names.

Cannot find module '@iconify/json'

@iconify/json is not installed

fix

Run `npm install @iconify/json` in your project root.

Cannot find module '@iconify/utils'

@iconify/utils is not installed

fix

Run `npm install @iconify/utils` in your project root.

iconify.file is not defined

No default CSS file set and 'icons' helper called without second argument

fix

Set `iconify.file: 'path/to/your.css'` in _config.yml or pass file path as second argument.

Upgrade

Version history

1.0.2latest on npm

Audit

Dependencies

@iconify/jsonrequiredProvides icon collection data (required for both helpers)

@iconify/utilsrequiredUtility functions for icon parsing and SVG generation (required for both helpers)

hexo-fsoptionalFile system operations used to write generated CSS; Hexo bundles it natively

Agent activity

46 hits · last 30 days

node

Resources

packagehexo-tiny ↗