Skip to content

Commit 9af4171

Browse files
adamdbradleyadamdbradley
committed
refactor(icon): export ionicons/icons package as data urls
1 parent cdbd383 commit 9af4171

File tree

3 files changed

+42
-50
lines changed

3 files changed

+42
-50
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"collection": "dist/collection/collection-manifest.json",
1414
"collection:main": "dist/collection/index.js",
1515
"scripts": {
16-
"build": "npm run lint.ts && npm run build.data && npm run build.icon && npm run generate && npm run build.css && npm run copy.tasks && npm run test",
16+
"build": "npm run lint.ts && npm run build.icon && npm run generate && npm run build.css && npm run copy.tasks && npm run test && npm run build.data",
1717
"build.css": "node scripts/build-css.js",
1818
"build.data": "node scripts/data.js",
1919
"build.icon": "stencil build",

‎scripts/data.js‎

Lines changed: 34 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,8 @@ const DST_ICONS_ESM = path.join(DST_ICONS_DIR, 'index.mjs');
1515
const DST_ICONS_CJS = path.join(DST_ICONS_DIR, 'index.js');
1616
const DST_ICONS_DTS = path.join(DST_ICONS_DIR, 'index.d.ts');
1717

18-
const DST_ICONS_IMPORTS_DIR = path.join(DST_ICONS_DIR, 'imports');
19-
2018

2119
fs.emptyDirSync(DST_ICONS_DIR);
22-
fs.emptyDirSync(DST_ICONS_IMPORTS_DIR);
2320

2421
console.log('checking icon data: ' + SRC_JSON);
2522

@@ -68,13 +65,13 @@ function camelize(text) {
6865

6966

7067
const moduleData = {};
71-
const esmIndex = [
68+
const esm = [
7269
`/* Ionicons, ES Modules */`, ``
7370
];
74-
const cjsIndex = [
71+
const cjs = [
7572
`/* Ionicons, CommonJS */`, ``
7673
];
77-
const dtsIndex = [
74+
const dts = [
7875
`/* Ionicons, Types */`, ``
7976
];
8077

@@ -119,8 +116,6 @@ svgFiles.forEach(fileName => {
119116
modes: {}
120117
};
121118
moduleData[exportCommonName] = commonIconData;
122-
123-
esmIndex.push(`import ${exportCommonName} from './imports/${commonName}.mjs';`);
124119
}
125120

126121
commonIconData.modes[mode] = {
@@ -131,76 +126,66 @@ svgFiles.forEach(fileName => {
131126
};
132127
});
133128

134-
esmIndex.push(``);
135-
136129

137130
const sortedKeys = Object.keys(moduleData).sort();
138131

139132
sortedKeys.forEach(key => {
140133
const d = moduleData[key];
141-
const esmFilePath = path.join(DST_ICONS_IMPORTS_DIR, d.commonName + '.mjs');
142-
const cjsFilePath = path.join(DST_ICONS_IMPORTS_DIR, d.commonName + '.js');
143-
const esm = [];
144-
const cjs = [];
145-
146134
const modes = Object.keys(d.modes).sort();
147135

148136
if (modes.length > 1) {
149-
for (let i = 0; i < modes.length; i++) {
150-
const mode = modes[i];
151-
esm.push(`import ${mode} from '../../dist/ionicons/svg/${d.modes[mode].fileName}';`);
152-
}
153-
154-
esm.push(``);
155-
esm.push(`export default /*#__PURE__*/ {`);
156-
157-
cjs.push(`module.exports = /*#__PURE__*/ {`);
158-
159-
dtsIndex.push(`export declare var ${d.exportCommonName}: {`);
137+
esm.push(`export const ${d.exportCommonName} = {`);
138+
cjs.push(`exports.${d.exportCommonName} = {`);
139+
dts.push(`export declare var ${d.exportCommonName}: {`);
160140

161141
for (let i = 0; i < modes.length; i++) {
162142
const mode = modes[i];
163143
const suffix = i < modes.length - 1 ? ',' : '';
164144

165-
esm.push(` ${mode}: ${mode}${suffix}`);
145+
const svgContent = getDataUrl(d.modes[mode].fileName);
166146

167-
cjs.push(` ${mode}: require('../../dist/ionicons/svg/${d.modes[mode].fileName}')${suffix}`);
147+
esm.push(` ${mode}: ${svgContent}${suffix}`);
148+
cjs.push(` ${mode}: ${svgContent}${suffix}`);
168149

169-
dtsIndex.push(` ${mode}: string;`);
150+
dts.push(` ${mode}: string;`);
170151
}
171152

172153
esm.push(`};`);
173154
cjs.push(`};`);
174-
dtsIndex.push(`};`);
155+
dts.push(`};`);
175156

176157
} else {
177-
esm.push(`import icon from '../../dist/ionicons/svg/${d.fileName}'`);
178-
esm.push(``);
179-
esm.push(`export default /*#__PURE__*/ icon;`);
180-
181-
cjs.push(`module.exports = /*#__PURE__*/ require('../../dist/ionicons/svg/${d.fileName}');`);
158+
const svgContent = getDataUrl(d.fileName);
182159

183-
dtsIndex.push(`export declare var ${d.exportCommonName}: string;`);
184-
}
160+
esm.push(`export const ${d.exportCommonName} = ${svgContent};`);
185161

186-
esmIndex.push(`export { ${d.exportCommonName} }`);
162+
cjs.push(`exports.${d.exportCommonName} = ${svgContent};`);
187163

188-
cjsIndex.push(`exports.${d.exportCommonName} = /*#__PURE__*/ require('./imports/${d.commonName}.js');`);
189-
190-
fs.writeFileSync(esmFilePath, esm.join('\n'));
191-
fs.writeFileSync(cjsFilePath, cjs.join('\n'));
164+
dts.push(`export declare var ${d.exportCommonName}: string;`);
165+
}
192166
});
193167

194-
fs.writeFileSync(DST_ICONS_ESM, esmIndex.join('\n') + '\n');
195-
fs.writeFileSync(DST_ICONS_CJS, cjsIndex.join('\n') + '\n');
196-
fs.writeFileSync(DST_ICONS_DTS, dtsIndex.join('\n') + '\n');
168+
fs.writeFileSync(DST_ICONS_ESM, esm.join('\n') + '\n');
169+
fs.writeFileSync(DST_ICONS_CJS, cjs.join('\n') + '\n');
170+
fs.writeFileSync(DST_ICONS_DTS, dts.join('\n') + '\n');
197171

198172
fs.writeFileSync(DST_ICONS_PKGJSON, JSON.stringify({
199173
"name": "ionicons/icons",
200-
"main": "index.mjs",
174+
"module": "index.mjs",
175+
"main": "index.js",
201176
"typings": "index.d.ts",
202-
"sideEffects": [
203-
"imports/"
204-
],
205177
"private": true
206178
}, null, 2));
179+
180+
function getDataUrl(filePath) {
181+
filePath = path.join(__dirname, '..', 'dist', 'ionicons', 'svg', filePath);
182+
let svg = fs.readFileSync(filePath, 'utf8');
183+
if (svg.includes(`'`)) {
184+
throw new Error(`oh no! no single quotes allowed! ${filePath}`);
185+
}
186+
if (svg.includes(`\n`) || svg.includes(`\r`)) {
187+
throw new Error(`oh no! no new lines allowed! ${filePath}`);
188+
}
189+
svg = svg.replace(/"/g, "'");
190+
return `"data:image/svg+xml;utf8,${svg}"`;
191+
}

‎src/components/index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,10 @@ <h2>Custom SVGs</h2>
7979
<ion-icon src="./assets/web_asset.svg"></ion-icon>
8080
<ion-icon src="./assets/work_outline.svg"></ion-icon>
8181

82+
<h2>Data Url SVG</h2>
83+
<ion-icon src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zM76 256c0-48.1 18.7-93.3 52.7-127.3S207.9 76 256 76c48.1 0 93.3 18.7 127.3 52.7 32.2 32.2 50.7 74.5 52.6 119.7-8.8-10.3-24.2-24-43.8-24-27.5 0-41.7 25.7-51 42.7-1.4 2.5-2.7 4.9-3.9 7-11.4 19.2-27.3 30-42.5 28.9-13.4-.9-24.8-11.2-32.2-28.8-9.2-22.1-29.1-45.8-52.9-49.2-11.3-1.6-28.1.8-44.7 21.4-3.2 4-6.9 9.4-11.1 15.6-10.4 15.5-26.2 38.8-38.1 40.8-17.3 2.8-30.9-7.5-36.4-12.3-2.2-11.2-3.3-22.8-3.3-34.5z'/></svg>"></ion-icon>
84+
<ion-icon id="dataUrl"></ion-icon>
85+
8286
<h2>Custom SVGs: colors</h2>
8387
<ion-icon color="primary" src="./assets/bug_report.svg"></ion-icon>
8488
<ion-icon color="secondary" src="./assets/chat.svg"></ion-icon>
@@ -848,6 +852,9 @@ <h2>Every Icon</h2>
848852
fill: blue;
849853
}
850854
</style>
855+
<script>
856+
document.getElementById('dataUrl').src = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M368.5 240H272v-96.5c0-8.8-7.2-16-16-16s-16 7.2-16 16V240h-96.5c-8.8 0-16 7.2-16 16 0 4.4 1.8 8.4 4.7 11.3 2.9 2.9 6.9 4.7 11.3 4.7H240v96.5c0 4.4 1.8 8.4 4.7 11.3 2.9 2.9 6.9 4.7 11.3 4.7 8.8 0 16-7.2 16-16V272h96.5c8.8 0 16-7.2 16-16s-7.2-16-16-16z"/></svg>';
857+
</script>
851858
</body>
852859

853860
</html>

0 commit comments

Comments
 (0)