Skip to content

Commit

Permalink
migrate to 16 factor, update dependencies, add few icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@cadgerfeast
cadgerfeast committed Jun 27, 2022
1 parent 99d7ff8 commit e13a60a
Show file tree
Hide file tree
Showing 285 changed files with 19,521 additions and 3,522 deletions.
47 changes: 28 additions & 19 deletions ICONS.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,37 @@
<table>
<tbody>
<tr>
<td align="center"><img src="./png-150/silver-coin.png" width="100px"/><br/><span>silver-coin</span><br/><span>[currency]</span></td>
<td align="center"><img src="./png-150/refresh.png" width="100px"/><br/><span>refresh</span><br/><span>[arrows, browsers]</span></td>
<td align="center"><img src="./png-150/pizza-slice.png" width="100px"/><br/><span>pizza-slice</span><br/><span>[food]</span></td>
<td align="center"><img src="./png-150/pipe-top.png" width="100px"/><br/><span>pipe-top</span><br/><span>[mario]</span></td>
<td align="center"><img src="./png-150/phone.png" width="100px"/><br/><span>phone</span><br/><span>[media]</span></td>
<td align="center"><img src="./png-150/internet-explorer.png" width="100px"/><br/><span>internet-explorer</span><br/><span>[code, browsers]</span></td>
<td align="center"><img src="./png-150/home.png" width="100px"/><br/><span>home</span><br/><span>[buildings]</span></td>
<td align="center"><img src="./png-150/gold-coin.png" width="100px"/><br/><span>gold-coin</span><br/><span>[currency]</span></td>
<td align="center"><img src="./png-128/youtube.png" width="100px"/><br/><span>youtube</span><br/><span>[social]</span></td>
<td align="center"><img src="./png-128/whatsapp.png" width="100px"/><br/><span>whatsapp</span><br/><span>[social]</span></td>
<td align="center"><img src="./png-128/twitter.png" width="100px"/><br/><span>twitter</span><br/><span>[social]</span></td>
<td align="center"><img src="./png-128/skull.png" width="100px"/><br/><span>skull</span><br/><span>[anatomy]</span></td>
<td align="center"><img src="./png-128/silver-coin.png" width="100px"/><br/><span>silver-coin</span><br/><span>[currency]</span></td>
<td align="center"><img src="./png-128/refresh.png" width="100px"/><br/><span>refresh</span><br/><span>[arrows, browsers]</span></td>
<td align="center"><img src="./png-128/pizza-slice.png" width="100px"/><br/><span>pizza-slice</span><br/><span>[food]</span></td>
<td align="center"><img src="./png-128/pipe-top.png" width="100px"/><br/><span>pipe-top</span><br/><span>[mario]</span></td>
</tr>
<tr>
<td align="center"><img src="./png-150/floppy-disk.png" width="100px"/><br/><span>floppy-disk</span><br/><span>[storage]</span></td>
<td align="center"><img src="./png-150/eye.png" width="100px"/><br/><span>eye</span><br/><span>[anatomy]</span></td>
<td align="center"><img src="./png-150/dino.png" width="100px"/><br/><span>dino</span><br/><span>[animal]</span></td>
<td align="center"><img src="./png-150/diamond.png" width="100px"/><br/><span>diamond</span><br/><span>[currency]</span></td>
<td align="center"><img src="./png-150/cross.png" width="100px"/><br/><span>cross</span><br/><span>[mathematics]</span></td>
<td align="center"><img src="./png-150/code.png" width="100px"/><br/><span>code</span><br/><span>[code]</span></td>
<td align="center"><img src="./png-150/circuit.png" width="100px"/><br/><span>circuit</span><br/><span>[electrical]</span></td>
<td align="center"><img src="./png-150/chevron-right.png" width="100px"/><br/><span>chevron-right</span><br/><span>[arrows]</span></td>
<td align="center"><img src="./png-128/phone.png" width="100px"/><br/><span>phone</span><br/><span>[media]</span></td>
<td align="center"><img src="./png-128/linkedin.png" width="100px"/><br/><span>linkedin</span><br/><span>[social]</span></td>
<td align="center"><img src="./png-128/internet-explorer.png" width="100px"/><br/><span>internet-explorer</span><br/><span>[code, browsers]</span></td>
<td align="center"><img src="./png-128/home.png" width="100px"/><br/><span>home</span><br/><span>[buildings]</span></td>
<td align="center"><img src="./png-128/gold-coin.png" width="100px"/><br/><span>gold-coin</span><br/><span>[currency]</span></td>
<td align="center"><img src="./png-128/github.png" width="100px"/><br/><span>github</span><br/><span>[code, social]</span></td>
<td align="center"><img src="./png-128/floppy-disk.png" width="100px"/><br/><span>floppy-disk</span><br/><span>[storage]</span></td>
<td align="center"><img src="./png-128/facebook.png" width="100px"/><br/><span>facebook</span><br/><span>[social]</span></td>
</tr>
<tr>
<td align="center"><img src="./png-150/chevron-left.png" width="100px"/><br/><span>chevron-left</span><br/><span>[arrows]</span></td>
<td align="center"><img src="./png-150/chat.png" width="100px"/><br/><span>chat</span><br/><span>[media]</span></td>
<td align="center"><img src="./png-150/bronze-coin.png" width="100px"/><br/><span>bronze-coin</span><br/><span>[currency]</span></td>
<td align="center"><img src="./png-128/eye.png" width="100px"/><br/><span>eye</span><br/><span>[anatomy]</span></td>
<td align="center"><img src="./png-128/dino.png" width="100px"/><br/><span>dino</span><br/><span>[animal]</span></td>
<td align="center"><img src="./png-128/diamond.png" width="100px"/><br/><span>diamond</span><br/><span>[currency]</span></td>
<td align="center"><img src="./png-128/cross.png" width="100px"/><br/><span>cross</span><br/><span>[mathematics]</span></td>
<td align="center"><img src="./png-128/code.png" width="100px"/><br/><span>code</span><br/><span>[code]</span></td>
<td align="center"><img src="./png-128/circuit.png" width="100px"/><br/><span>circuit</span><br/><span>[electrical]</span></td>
<td align="center"><img src="./png-128/chevron-right.png" width="100px"/><br/><span>chevron-right</span><br/><span>[arrows]</span></td>
<td align="center"><img src="./png-128/chevron-left.png" width="100px"/><br/><span>chevron-left</span><br/><span>[arrows]</span></td>
</tr>
<tr>
<td align="center"><img src="./png-128/chat.png" width="100px"/><br/><span>chat</span><br/><span>[media]</span></td>
<td align="center"><img src="./png-128/bronze-coin.png" width="100px"/><br/><span>bronze-coin</span><br/><span>[currency]</span></td>
</tbody>
</table>
27 changes: 19 additions & 8 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ npm install --save @pixel/icons
<table>
<tbody>
<tr>
<td align="center"><img src="./png-150/home.png"/></td>
<td align="center"><img src="./png-150/dino.png"/></td>
<td align="center"><img src="./png-150/floppy-disk.png"/></td>
<td align="center"><img src="./png-128/home.png"/></td>
<td align="center"><img src="./png-128/dino.png"/></td>
<td align="center"><img src="./png-128/floppy-disk.png"/></td>
</tbody>
</table>

Expand All @@ -43,14 +43,18 @@ See full icon list [here.](./ICONS.md "Full icon list")

Icons are also available as standalone files under multiple resolutions:

* `png-15`: 15px
* `png-150`: 150px
* `png-1500`: 1500px
* `svg`: 150px
* `png-16`: 16px
* `png-32`: 32px
* `png-64`: 64px
* `png-128`: 128px
* `png-256`: 256px
* `png-512`: 512px
* `png-1024`: 1024px
* `svg`: 256px

``` html
<!-- Usage -->
<img src="@pixel/icons/png-150/home.png" alt="home"/>
<img src="@pixel/icons/png-128/home.png" alt="home"/>
<img src="@pixel/icons/svg/home.svg" alt="home"/>
```

Expand All @@ -66,6 +70,13 @@ Icons are also available as standalone files under multiple resolutions:
<span>cadgerfeast</span>
</a>
</td>
<td align="center">
<a href="https://github.com/zeromero-dev">
<img src="https://github.com/zeromero-dev.png?size=100" alt="zeromero-dev" width="100px">
<br/>
<span>zeromero-dev</span>
</a>
</td>
</tr>
</tbody>
</table>
Expand Down
74 changes: 40 additions & 34 deletions build.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
const fs = require('fs');
// Helpers
const fs = require('fs-extra');
const path = require('path');
const sharp = require('sharp');
const svgtofont = require('svgtofont');

const icons15Path = path.resolve(__dirname, 'png-15');
const icons150Path = path.resolve(__dirname, 'png-150');
const icons1500Path = path.resolve(__dirname, 'png-1500');
const iconsSvgPath = path.resolve(__dirname, 'svg');
// Constants
const icons = require('./icons.json');
const iconSizes = [32, 64, 128, 256, 512, 1024];
const iconPngPath = path.resolve(__dirname, 'png-16');
const iconSvgPath = path.resolve(__dirname, 'svg');
const fontsPath = path.resolve(__dirname, 'fonts');
const distPath = path.resolve(__dirname, 'dist');

const icons = require('./icons.json');

let declaration = `declare interface PixelSvgData {
svg: string;
colors: string[];
Expand All @@ -27,7 +26,7 @@ declare module '@pixel/icons' {
export default value;
}`;

function rimraf (folder) {
function rimraf(folder) {
if (fs.existsSync(folder)) {
fs.readdirSync(folder).forEach((entry) => {
const currentPath = path.join(folder, entry);
Expand All @@ -42,14 +41,14 @@ function rimraf (folder) {
}
module.exports.rimraf = rimraf;

function generateList (list) {
function generateList(list) {
let markdownContent = '# Icon list\n\n';
markdownContent += '<table>\n\t<tbody>\n';
markdownContent += '\t\t<tr>\n';
let count = 0;
for (const icon in list) {
count++;
markdownContent += `\t\t\t<td align="center"><img src="./png-150/${icon}.png" width="100px"/><br/><span>${icon}</span><br/><span>[${icons[icon].tags.join(', ')}]</span></td>\n`;
markdownContent += `\t\t\t<td align="center"><img src="./png-128/${icon}.png" width="100px"/><br/><span>${icon}</span><br/><span>[${icons[icon].tags.join(', ')}]</span></td>\n`;
if (count > 7) {
markdownContent += '\t\t</tr>\n';
markdownContent += '\t\t<tr>\n';
Expand All @@ -60,25 +59,26 @@ function generateList (list) {
fs.writeFileSync(path.resolve(__dirname, 'ICONS.md'), markdownContent);
}

async function createIcon (icon, destSvg, dest150, dest1500) {
const src = path.resolve(icons15Path, icon);
const i150FilePath = path.resolve(dest150, icon);
await sharp(src).resize(150, 150, { kernel: 'nearest' }).toFile(i150FilePath);
const i1500FilePath = path.resolve(dest1500, icon);
await sharp(src).resize(1500, 1500, { kernel: 'nearest' }).toFile(i1500FilePath);
const iSvgFilePath = path.resolve(destSvg, icon.replace(/.png/g, '.svg'));
return await generateSvg(icon.slice(0, -4), src, iSvgFilePath);
async function createIcon(icon) {
const src = path.resolve(iconPngPath, icon);
for (const size of iconSizes) {
const destPath = path.resolve(__dirname, `png-${size}/${icon}`);
await sharp(src).resize(size, size, { kernel: 'nearest' }).toFile(destPath);
}
const iSvgFilePath = path.resolve(__dirname, `svg/${icon.replace(/.png/g, '.svg')}`);
return await generateSvg(src, iSvgFilePath);
}

async function generateSvg (name, src, dest) {
async function generateSvg(src, dest) {
const factor = Math.pow(2, 4);
return new Promise((resolve, reject) => {
sharp(src).raw()
.toBuffer((err, buffer, img) => {
if (err) { reject(err); }
const svgData = {
colors: []
};
let svgContent = `<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" width="${img.width * 10}" height="${img.height * 10}">\n`;
let svgContent = `<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" viewBox="0 0 ${img.height * factor} ${img.height * factor}" width="${img.width * factor}" height="${img.height * factor}">\n`;
const colors = [];
for (let i = 0; i < img.height; i++) {
for (let j = 0; j < img.width; j++) {
Expand All @@ -89,8 +89,8 @@ async function generateSvg (name, src, dest) {
if (index === -1) {
colors.push(style);
index = colors.indexOf(style);
}
svgContent += `\t<rect fill="${style}" x="${j * 10}" y="${i * 10}" width="10" height="10"/>\n`;
}
svgContent += `\t<rect fill="${style}" x="${j * factor}" y="${i * factor}" width="${factor}" height="${factor}"/>\n`;
}
}
}
Expand All @@ -105,19 +105,17 @@ async function generateSvg (name, src, dest) {
});
}

async function main () {
async function main() {
try {
rimraf(iconsSvgPath);
rimraf(icons150Path);
rimraf(icons1500Path);
for (const size of iconSizes) {
fs.emptyDirSync(path.resolve(__dirname, `png-${size}`));
}
fs.emptyDirSync(iconSvgPath);
// Building icons
fs.mkdirSync(iconsSvgPath);
fs.mkdirSync(icons150Path);
fs.mkdirSync(icons1500Path);
const svgFiles = [];
const finalIconList = {};
const iconList = Object.keys(icons);
const iconFiles = fs.readdirSync(icons15Path);
const iconFiles = fs.readdirSync(iconPngPath);
for (let i = iconFiles.length; i--;) {
const iconName = iconFiles[i].slice(0, -4);
if (iconList.indexOf(iconName) === -1) {
Expand All @@ -136,7 +134,7 @@ async function main () {
}
declaration += '\n\ndeclare enum PixelIconList {';
for (const icon in finalIconList) {
const { svgIcon, svgData } = await createIcon(`${icon}.png`, iconsSvgPath, icons150Path, icons1500Path);
const { svgIcon, svgData } = await createIcon(`${icon}.png`);
finalIconList[icon].data = svgData;
svgFiles.push(svgIcon);
declaration += `\n\t'${icon}' = '${icon}',`;
Expand All @@ -159,12 +157,20 @@ async function main () {
rimraf(fontsPath);
}
svgtofont({
src: iconsSvgPath,
src: iconSvgPath,
dist: fontsPath,
fontName: 'PixelIcons',
classNamePrefix: 'pi',
css: {
fontSize: '30px'
fontSize: '16px'
},
svgicons2svgfont: {
fontHeight: 1000,
normalize: true
},
website: {
title: 'Pixel Icons',
logo: path.resolve(__dirname, 'svg/github.svg')
}
});
} catch (error) {
Expand Down
39 changes: 23 additions & 16 deletions fonts/PixelIcons.css
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
@font-face {
font-family: "PixelIcons";
src: url('PixelIcons.eot?t=1620134252356'); /* IE9*/
src: url('PixelIcons.eot?t=1620134252356#iefix') format('embedded-opentype'), /* IE6-IE8 */
url("PixelIcons.woff2?t=1620134252356") format("woff2"),
url("PixelIcons.woff?t=1620134252356") format("woff"),
url('PixelIcons.ttf?t=1620134252356') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('PixelIcons.svg?t=1620134252356#PixelIcons') format('svg'); /* iOS 4.1- */
src: url('PixelIcons.eot?t=1656355405558'); /* IE9*/
src: url('PixelIcons.eot?t=1656355405558#iefix') format('embedded-opentype'), /* IE6-IE8 */
url("PixelIcons.woff2?t=1656355405558") format("woff2"),
url("PixelIcons.woff?t=1656355405558") format("woff"),
url('PixelIcons.ttf?t=1656355405558') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('PixelIcons.svg?t=1656355405558#PixelIcons') format('svg'); /* iOS 4.1- */
}

[class^="pi-"], [class*=" pi-"] {
font-family: 'PixelIcons' !important;
font-size:30px;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
Expand All @@ -27,12 +27,19 @@
.pi-diamond:before { content: "\ea08"; }
.pi-dino:before { content: "\ea09"; }
.pi-eye:before { content: "\ea0a"; }
.pi-floppy-disk:before { content: "\ea0b"; }
.pi-gold-coin:before { content: "\ea0c"; }
.pi-home:before { content: "\ea0d"; }
.pi-internet-explorer:before { content: "\ea0e"; }
.pi-phone:before { content: "\ea0f"; }
.pi-pipe-top:before { content: "\ea10"; }
.pi-pizza-slice:before { content: "\ea11"; }
.pi-refresh:before { content: "\ea12"; }
.pi-silver-coin:before { content: "\ea13"; }
.pi-facebook:before { content: "\ea0b"; }
.pi-floppy-disk:before { content: "\ea0c"; }
.pi-github:before { content: "\ea0d"; }
.pi-gold-coin:before { content: "\ea0e"; }
.pi-home:before { content: "\ea0f"; }
.pi-internet-explorer:before { content: "\ea10"; }
.pi-linkedin:before { content: "\ea11"; }
.pi-phone:before { content: "\ea12"; }
.pi-pipe-top:before { content: "\ea13"; }
.pi-pizza-slice:before { content: "\ea14"; }
.pi-refresh:before { content: "\ea15"; }
.pi-silver-coin:before { content: "\ea16"; }
.pi-skull:before { content: "\ea17"; }
.pi-twitter:before { content: "\ea18"; }
.pi-whatsapp:before { content: "\ea19"; }
.pi-youtube:before { content: "\ea1a"; }
Binary file modified fonts/PixelIcons.eot
View file
Binary file not shown.
39 changes: 23 additions & 16 deletions fonts/PixelIcons.less
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
@font-face {font-family: "PixelIcons";
src: url('PixelIcons.eot?t=1620134252356'); /* IE9*/
src: url('PixelIcons.eot?t=1620134252356#iefix') format('embedded-opentype'), /* IE6-IE8 */
url("PixelIcons.woff2?t=1620134252356") format("woff2"),
url("PixelIcons.woff?t=1620134252356") format("woff"),
url('PixelIcons.ttf?t=1620134252356') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('PixelIcons.svg?t=1620134252356#PixelIcons') format('svg'); /* iOS 4.1- */
src: url('PixelIcons.eot?t=1656355405558'); /* IE9*/
src: url('PixelIcons.eot?t=1656355405558#iefix') format('embedded-opentype'), /* IE6-IE8 */
url("PixelIcons.woff2?t=1656355405558") format("woff2"),
url("PixelIcons.woff?t=1656355405558") format("woff"),
url('PixelIcons.ttf?t=1656355405558') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('PixelIcons.svg?t=1656355405558#PixelIcons') format('svg'); /* iOS 4.1- */
}

[class^="pi-"], [class*=" pi-"] {
font-family: 'PixelIcons' !important;
font-size: 30px;
font-size: 16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
Expand All @@ -25,12 +25,19 @@
.pi-diamond:before { content: "\ea08"; }
.pi-dino:before { content: "\ea09"; }
.pi-eye:before { content: "\ea0a"; }
.pi-floppy-disk:before { content: "\ea0b"; }
.pi-gold-coin:before { content: "\ea0c"; }
.pi-home:before { content: "\ea0d"; }
.pi-internet-explorer:before { content: "\ea0e"; }
.pi-phone:before { content: "\ea0f"; }
.pi-pipe-top:before { content: "\ea10"; }
.pi-pizza-slice:before { content: "\ea11"; }
.pi-refresh:before { content: "\ea12"; }
.pi-silver-coin:before { content: "\ea13"; }
.pi-facebook:before { content: "\ea0b"; }
.pi-floppy-disk:before { content: "\ea0c"; }
.pi-github:before { content: "\ea0d"; }
.pi-gold-coin:before { content: "\ea0e"; }
.pi-home:before { content: "\ea0f"; }
.pi-internet-explorer:before { content: "\ea10"; }
.pi-linkedin:before { content: "\ea11"; }
.pi-phone:before { content: "\ea12"; }
.pi-pipe-top:before { content: "\ea13"; }
.pi-pizza-slice:before { content: "\ea14"; }
.pi-refresh:before { content: "\ea15"; }
.pi-silver-coin:before { content: "\ea16"; }
.pi-skull:before { content: "\ea17"; }
.pi-twitter:before { content: "\ea18"; }
.pi-whatsapp:before { content: "\ea19"; }
.pi-youtube:before { content: "\ea1a"; }
Loading

0 comments on commit e13a60a

Please sign in to comment.