chore(tablericons.js): expose renderTablerIcon function

This commit is contained in:
Cory Dransfeldt 2025-06-15 15:44:18 -07:00
parent 7c6639cbb7
commit 3071e76493
No known key found for this signature in database
3 changed files with 39 additions and 29 deletions

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "@cdransf/eleventy-plugin-tabler-icons", "name": "@cdransf/eleventy-plugin-tabler-icons",
"version": "2.13.0", "version": "2.13.1",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@cdransf/eleventy-plugin-tabler-icons", "name": "@cdransf/eleventy-plugin-tabler-icons",
"version": "2.13.0", "version": "2.13.1",
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"@11ty/eleventy": "v3.0.0", "@11ty/eleventy": "v3.0.0",

View file

@ -1,6 +1,6 @@
{ {
"name": "@cdransf/eleventy-plugin-tabler-icons", "name": "@cdransf/eleventy-plugin-tabler-icons",
"version": "2.13.0", "version": "2.13.1",
"description": "Shortcodes to add Tabler icons to your Eleventy projects", "description": "Shortcodes to add Tabler icons to your Eleventy projects",
"type": "module", "type": "module",
"main": "tablericons.js", "main": "tablericons.js",

View file

@ -1,48 +1,58 @@
import ICONS from './icons.js' import ICONS from './icons.js';
const tablericons = (eleventyConfig, config = {}) => { const tablericons = (eleventyConfig, config = {}) => {
const { className = '', errorOnMissing = false } = config const { className = '', errorOnMissing = false } = config;
const renderIcon = (context = this, name, alt, attrs) => { const renderIcon = (context = {}, name, alt = '', attrs = {}) => {
const contents = ICONS[name] const contents = ICONS[name];
if (!contents) { if (!contents) {
handleMissingIcon(name, context.page.inputPath) handleMissingIcon(name, context.page?.inputPath);
return '' return '';
} }
return `${head(alt, className, name, attrs)}${contents}${ICONS.TAIL}` return `${buildHead(alt, className, name, attrs)}${contents}${ICONS.TAIL}`;
} };
const handleMissingIcon = (name, inputPath) => { const handleMissingIcon = (name, inputPath) => {
const message = `No tablericons found for name '${name}'` const message = `No tablericon found for name '${name}'`;
if (errorOnMissing) { if (errorOnMissing) {
throw new Error(message) throw new Error(message);
} else { } else {
console.warn(`${message} in ${inputPath}`) console.warn(`${message}${inputPath ? ` in ${inputPath}` : ''}`);
}
} }
};
// Register shortcode for Eleventy 3.0 eleventyConfig.addShortcode('tablericon', function (name, alt, attrs) {
eleventyConfig.addShortcode('tablericon', (name, alt, attrs) => { return renderIcon(this, name, alt, attrs);
return renderIcon(this, name, alt, attrs) });
}) };
}
const head = (alt, className, iconName, attrs) => { const buildHead = (alt = '', className = '', iconName, attrs = {}) => {
let output = `${ICONS.HEAD.slice(0, -1)} aria-hidden='true'` let output = `${ICONS.HEAD.slice(0, -1)} aria-hidden="true"`;
if (className) output += ` class='${className}'` if (className) output += ` class="${className}"`;
output += ` data-tablericon-name='${iconName}'` output += ` data-tablericon-name="${iconName}"`;
if (typeof attrs === 'string') { if (typeof attrs === 'string') {
output += ` ${attrs}` output += ` ${attrs}`;
} else if (attrs && typeof attrs === 'object') { } else if (attrs && typeof attrs === 'object') {
output += Object.entries(attrs) output += Object.entries(attrs)
.map(([property, value]) => (property && value ? ` ${property}='${value}'` : '')) .map(([key, val]) => (key && val ? ` ${key}="${val}"` : ''))
.join('') .join('');
} }
return `${output}>` return `${output}>`;
};
export function renderTablerIcon(name, alt = '', attrs = {}, options = {}) {
const context = { page: { inputPath: options.inputPath || '' } };
const contents = ICONS[name];
if (!contents) {
console.warn(`No tablericon found for name '${name}'${options.inputPath ? ` in ${options.inputPath}` : ''}`);
return '';
}
return `${buildHead(alt, options.className || '', name, attrs)}${contents}${ICONS.TAIL}`;
} }
export default tablericons export default tablericons;