Compare commits
18 commits
Author | SHA1 | Date | |
---|---|---|---|
185ae2921e | |||
ed9a968b1c | |||
18e1a5ea71 | |||
87ec17fbc6 | |||
76ddf1d01b | |||
56a78d5d2a | |||
3d2792afa5 | |||
c592874ce5 | |||
ae4d43b437 | |||
1040def4cc | |||
d3f676d03c | |||
31b01ad395 | |||
a4c1995561 | |||
5908965aef | |||
4520e0c9d4 | |||
7d95234fa3 | |||
86eaf1ded5 | |||
919b3717f8 |
5 changed files with 5048 additions and 64 deletions
58
build.js
58
build.js
|
@ -1,28 +1,36 @@
|
||||||
const fs = require('fs');
|
import { readdirSync, readFileSync, writeFileSync } from 'fs'
|
||||||
const path = `./node_modules/@tabler/icons/icons/filled/`;
|
import path from 'path'
|
||||||
const fileNames = fs.readdirSync(path);
|
|
||||||
const object = {};
|
const ICONS_DIR = path.join('node_modules', '@tabler', 'icons', 'icons', 'outline')
|
||||||
const CONTENTS = {
|
const CONTENTS = {
|
||||||
HEAD: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">",
|
HEAD: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">`,
|
||||||
TAIL: "</svg>",
|
TAIL: '</svg>'
|
||||||
};
|
}
|
||||||
|
const object = {}
|
||||||
|
|
||||||
fileNames.forEach((filename) => {
|
try {
|
||||||
const contents = fs
|
const fileNames = readdirSync(ICONS_DIR)
|
||||||
.readFileSync(path + filename)
|
|
||||||
.toString()
|
|
||||||
.trimEnd();
|
|
||||||
const lines = contents.split("\n");
|
|
||||||
const guts = lines
|
|
||||||
.slice(1, lines.length - 1)
|
|
||||||
.join("")
|
|
||||||
.replace(/\ \ /g, "");
|
|
||||||
if (object) object[filename.slice(0, -4)] = guts;
|
|
||||||
});
|
|
||||||
|
|
||||||
fs.writeFileSync(
|
fileNames.forEach((filename) => {
|
||||||
"./icons.js",
|
const filePath = path.join(ICONS_DIR, filename)
|
||||||
`// Generated by build.js at ${new Date().toISOString()}\n\nmodule.exports = ${JSON.stringify(
|
const contents = readFileSync(filePath, 'utf8').trim()
|
||||||
{...object, HEAD: CONTENTS['HEAD'], TAIL: CONTENTS['TAIL']}
|
|
||||||
)};\n`
|
const guts = contents
|
||||||
);
|
.replace(/^<svg[^>]*>/, '')
|
||||||
|
.replace(/<\/svg>$/, '')
|
||||||
|
.replace(/\s{2,}/g, ' ')
|
||||||
|
|
||||||
|
object[filename.slice(0, -4)] = guts
|
||||||
|
})
|
||||||
|
|
||||||
|
const output = `// Generated by build.js at ${new Date().toISOString()}
|
||||||
|
|
||||||
|
export default ${JSON.stringify({ ...object, HEAD: CONTENTS.HEAD, TAIL: CONTENTS.TAIL }, null, 2)};
|
||||||
|
`
|
||||||
|
|
||||||
|
writeFileSync('./icons.js', output)
|
||||||
|
|
||||||
|
console.log('Icons successfully generated and saved to icons.js!')
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error processing icons:', err)
|
||||||
|
}
|
4970
icons.js
4970
icons.js
File diff suppressed because one or more lines are too long
12
package-lock.json
generated
12
package-lock.json
generated
|
@ -1,16 +1,16 @@
|
||||||
{
|
{
|
||||||
"name": "@cdransf/eleventy-tabler-icons-filled",
|
"name": "@cdransf/eleventy-tabler-icons-filled",
|
||||||
"version": "2.0.1",
|
"version": "2.13.1",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "@cdransf/eleventy-tabler-icons-filled",
|
"name": "@cdransf/eleventy-tabler-icons-filled",
|
||||||
"version": "2.0.1",
|
"version": "2.13.1",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@11ty/eleventy": "v3.0.0",
|
"@11ty/eleventy": "v3.0.0",
|
||||||
"@tabler/icons": "^3.19.0"
|
"@tabler/icons": "^3.34.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@11ty/dependency-tree": {
|
"node_modules/@11ty/dependency-tree": {
|
||||||
|
@ -349,9 +349,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@tabler/icons": {
|
"node_modules/@tabler/icons": {
|
||||||
"version": "3.19.0",
|
"version": "3.34.0",
|
||||||
"resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.19.0.tgz",
|
"resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.34.0.tgz",
|
||||||
"integrity": "sha512-A4WEWqpdbTfnpFEtwXqwAe9qf9sp1yRPvzppqAuwcoF0q5YInqB+JkJtSFToCyBpPVeLxJUxxkapLvt2qQgnag==",
|
"integrity": "sha512-jtVqv0JC1WU2TTEBN32D9+R6mc1iEBuPwLnBsWaR02SIEciu9aq5806AWkCHuObhQ4ERhhXErLEK7Fs+tEZxiA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"funding": {
|
"funding": {
|
||||||
|
|
10
package.json
10
package.json
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@cdransf/eleventy-tabler-icons-filled",
|
"name": "@cdransf/eleventy-tabler-icons-filled",
|
||||||
"version": "2.0.1",
|
"version": "2.13.1",
|
||||||
"description": "Shortcodes to add filled Tabler icons to your Eleventy projects",
|
"description": "Shortcodes to add filled Tabler icons to your Eleventy projects",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"main": "tablericons.js",
|
"main": "tablericons.js",
|
||||||
|
@ -25,15 +25,15 @@
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+https://github.com/cdransf/eleventy-tabler-icons-filled.git"
|
"url": "git+https://git.apps.coryd.dev/cdransf/eleventy-tabler-icons-filled.git"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/cdransf/eleventy-tabler-icons-filled#readme",
|
"homepage": "https://git.apps.coryd.dev/cdransf/eleventy-tabler-icons-filled#readme",
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/cdransf/eleventy-tabler-icons-filled/issues"
|
"url": "https://git.apps.coryd.dev/cdransf/eleventy-tabler-icons-filled/issues"
|
||||||
},
|
},
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@11ty/eleventy": "v3.0.0",
|
"@11ty/eleventy": "v3.0.0",
|
||||||
"@tabler/icons": "^3.19.0"
|
"@tabler/icons": "^3.34.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue