Build system to create css files with inline images and svgs, and svg symbol files.

This commit is contained in:
MannyC 2018-02-27 14:10:38 +00:00
parent f1fcfaec06
commit ab294b16f8
6 changed files with 3498 additions and 2 deletions

4
.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
build
node_modules

View File

@ -9,6 +9,16 @@ If there is an altcoin youre looking for that hasnt been included, please
![hero](img/hero@2x.jpg) ![hero](img/hero@2x.jpg)
## Building
The build system requires node and npm to be installed on your system. After they are installed you can install the npm dependencies with
npm install
You can then build with
npm run build
## Donate ## Donate

65
build_example.html Normal file
View File

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>cryptocurrency-icons example build usage</title>
<link rel="stylesheet" href="dist/32/black.css">
<link rel="stylesheet" href="dist/32/color.css">
<link rel="stylesheet" href="dist/32/icon.css">
<link rel="stylesheet" href="dist/32/white.css">
<link rel="stylesheet" href="dist/128/black.css">
<link rel="stylesheet" href="dist/128/color.css">
<link rel="stylesheet" href="dist/128/icon.css">
<link rel="stylesheet" href="dist/128/white.css">
<link rel="stylesheet" href="dist/svg/black.css">
<link rel="stylesheet" href="dist/svg/color.css">
<link rel="stylesheet" href="dist/svg/icon.css">
<link rel="stylesheet" href="dist/svg/white.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="home">
<table>
<tr>
<th></th>
<th> Black </th>
<th> Color </th>
<th> Icon </th>
<th> White </th>
</tr>
<tr>
<th> 32 </th>
<td><div class="crypto-icon-32 crypto-icon-32-black crypto-icon-32-black-btc"> </div></td>
<td><div class="crypto-icon-32 crypto-icon-32-color crypto-icon-32-color-btc"> </div></td>
<td><div class="crypto-icon-32 crypto-icon-32-icon crypto-icon-32-icon-btc"> </div></td>
<td><div style="background-color: black" class="crypto-icon-32 crypto-icon-32-white crypto-icon-32-white-btc"> </div></td>
</tr>
<tr>
<th> 128 </th>
<td><div class="crypto-icon-128 crypto-icon-128-black crypto-icon-128-black-btc"> </div></td>
<td><div class="crypto-icon-128 crypto-icon-128-color crypto-icon-128-color-btc"> </div></td>
<td><div class="crypto-icon-128 crypto-icon-128-icon crypto-icon-128-icon-btc"> </div></td>
<td><div style="background-color: black" class="crypto-icon-128 crypto-icon-128-white crypto-icon-128-white-btc"> </div></td>
</tr>
<tr>
<th> css svg </th>
<td><div class="crypto-icon-128 crypto-icon-svg-black crypto-icon-svg-black-btc"> </div></td>
<td><div class="crypto-icon-128 crypto-icon-svg-color crypto-icon-svg-color-btc"> </div></td>
<td><div class="crypto-icon-128 crypto-icon-svg-icon crypto-icon-svg-icon-btc"> </div></td>
<td><div style="background-color: black" class="crypto-icon-128 crypto-icon-svg-white crypto-icon-svg-white-btc"> </div></td>
</tr>
<tr>
<th> css xlink </th>
<td><svg class="crypto-icon-128" role="img"><use xlink:href="dist/svg/black.svg#agi"> </use></svg></td>
<td><svg class="crypto-icon-128" role="img"><use xlink:href="dist/svg/color.svg#agi"> </use></svg></td>
<td><svg class="crypto-icon-128" role="img"><use xlink:href="dist/svg/icon.svg#agi"> </use></svg></td>
<td><svg style="background-color: black" class="crypto-icon-128" role="img"><use xlink:href="dist/svg/white.svg#agi"> </use></svg></td>
</tr>
</table>
</body>
</html>

13
defaults.css Normal file
View File

@ -0,0 +1,13 @@
.crypto-icon-32 {
display: inline-block;
width: 32px;
height: 32px;
background-size: cover;
}
.crypto-icon-128 {
display: inline-block;
width: 128px;
height: 128px;
background-size: cover;
}

3338
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -2,15 +2,81 @@
"name": "cryptocurrency-icons", "name": "cryptocurrency-icons",
"description": "A set of icons for all the main cryptocurrencies and altcoins, in a range of styles and sizes.", "description": "A set of icons for all the main cryptocurrencies and altcoins, in a range of styles and sizes.",
"version": "0.0.1", "version": "0.0.1",
"keywords": ["cryptocurrency", "icon"], "keywords": [
"cryptocurrency",
"icon"
],
"homepage": "https://github.com/cjdowner/cryptocurrency-icons", "homepage": "https://github.com/cjdowner/cryptocurrency-icons",
"author": { "author": {
"name": "Christopher Downer", "name": "Christopher Downer",
"web": "https://github.com/cjdowner" "web": "https://github.com/cjdowner"
}, },
"scripts": {
"minify-images:32:black": "imagemin '32/black/*' --out-dir='build/32/black'",
"minify-images:32:color": "imagemin '32/color/*' --out-dir='build/32/color'",
"minify-images:32:icon": "imagemin '32/icon/*' --out-dir='build/32/icon'",
"minify-images:32:white": "imagemin '32/white/*' --out-dir='build/32/white'",
"minify-images:32": "npm run minify-images:32:black && npm run minify-images:32:color && npm run minify-images:32:icon && npm run minify-images:32:white",
"minify-images:128:black": "imagemin '128/black/*' --out-dir='build/128/black'",
"minify-images:128:color": "imagemin '128/color/*' --out-dir='build/128/color'",
"minify-images:128:icon": "imagemin '128/icon/*' --out-dir='build/128/icon'",
"minify-images:128:white": "imagemin '128/white/*' --out-dir='build/128/white'",
"minify-images:128": "npm run minify-images:128:black && npm run minify-images:128:color && npm run minify-images:128:icon && npm run minify-images:128:white",
"minify-images:svg:black": "imagemin 'svg/black/*' --out-dir='build/svg/black'",
"minify-images:svg:color": "imagemin 'svg/color/*' --out-dir='build/svg/color'",
"minify-images:svg:icon": "imagemin 'svg/icon/*' --out-dir='build/svg/icon'",
"minify-images:svg:white": "imagemin 'svg/white/*' --out-dir='build/svg/white'",
"minify-images:svg": "npm run minify-images:svg:black && npm run minify-images:svg:color && npm run minify-images:svg:icon && npm run minify-images:svg:white",
"minify-images": "npm run minify-images:32 && npm run minify-images:128 && npm run minify-images:svg",
"imacss:32:black": "mkdirp dist/32 && imacss 'build/32/black/*' blank_option crypto-icon-32-black > build/32/black.css",
"imacss:32:color": "mkdirp dist/32 && imacss 'build/32/color/*' blank_option crypto-icon-32-color > build/32/color.css",
"imacss:32:icon": "mkdirp dist/32 && imacss 'build/32/icon/*' blank_option crypto-icon-32-icon > build/32/icon.css",
"imacss:32:white": "mkdirp dist/32 && imacss 'build/32/white/*' blank_option crypto-icon-32-white > build/32/white.css",
"postimacss:32:black": "concat defaults.css build/32/black.css > dist/32/black.css",
"postimacss:32:color": "concat defaults.css build/32/color.css > dist/32/color.css",
"postimacss:32:icon": "concat defaults.css build/32/icon.css > dist/32/icon.css",
"postimacss:32:white": "concat defaults.css build/32/white.css > dist/32/white.css",
"imacss:32": "npm run imacss:32:black && npm run imacss:32:color && npm run imacss:32:icon && npm run imacss:32:white",
"imacss:128:black": "mkdirp dist/128 && imacss 'build/128/black/*' blank_option crypto-icon-128-black > build/128/black.css",
"imacss:128:color": "mkdirp dist/128 && imacss 'build/128/color/*' blank_option crypto-icon-128-color > build/128/color.css",
"imacss:128:icon": "mkdirp dist/128 && imacss 'build/128/icon/*' blank_option crypto-icon-128-icon > build/128/icon.css",
"imacss:128:white": "mkdirp dist/128 && imacss 'build/128/white/*' blank_option crypto-icon-128-white > build/128/white.css",
"postimacss:128:black": "concat defaults.css build/128/black.css > dist/128/black.css",
"postimacss:128:color": "concat defaults.css build/128/color.css > dist/128/color.css",
"postimacss:128:icon": "concat defaults.css build/128/icon.css > dist/128/icon.css",
"postimacss:128:white": "concat defaults.css build/128/white.css > dist/128/white.css",
"imacss:128": "npm run imacss:128:black && npm run imacss:128:color && npm run imacss:128:icon && npm run imacss:128:white",
"imacss:svg:black": "mkdirp dist/svg && imacss 'build/svg/black/*' blank_option crypto-icon-svg-black > build/svg/black.css",
"imacss:svg:color": "mkdirp dist/svg && imacss 'build/svg/color/*' blank_option crypto-icon-svg-color > build/svg/color.css",
"imacss:svg:icon": "mkdirp dist/svg && imacss 'build/svg/icon/*' blank_option crypto-icon-svg-icon > build/svg/icon.css",
"imacss:svg:white": "mkdirp dist/svg && imacss 'build/svg/white/*' blank_option crypto-icon-svg-white > build/svg/white.css",
"postimacss:svg:black": "concat defaults.css build/svg/black.css > dist/svg/black.css",
"postimacss:svg:color": "concat defaults.css build/svg/color.css > dist/svg/color.css",
"postimacss:svg:icon": "concat defaults.css build/svg/icon.css > dist/svg/icon.css",
"postimacss:svg:white": "concat defaults.css build/svg/white.css > dist/svg/white.css",
"imacss:svg": "npm run imacss:svg:black && npm run imacss:svg:color && npm run imacss:svg:icon && npm run imacss:svg:white",
"imacss": "npm run imacss:32 && npm run imacss:128 && npm run imacss:svg",
"svgstore:black": "mkdirp dist/svg && svgstore -o dist/svg/black.svg build/svg/black/*.svg",
"svgstore:color": "mkdirp dist/svg && svgstore -o dist/svg/color.svg build/svg/color/*.svg",
"svgstore:icon": "mkdirp dist/svg && svgstore -o dist/svg/icon.svg build/svg/icon/*.svg",
"svgstore:white": "mkdirp dist/svg && svgstore -o dist/svg/white.svg build/svg/white/*.svg",
"svgstore": "npm run svgstore:black && npm run svgstore:color && npm run svgstore:icon && npm run svgstore:white",
"clean": "rimraf build && rimraf dist",
"build": "npm run minify-images && npm run imacss && npm run svgstore",
"prebuild": "npm run clean"
},
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/cjdowner/cryptocurrency-icons.git" "url": "https://github.com/cjdowner/cryptocurrency-icons.git"
}, },
"license": "CC0-1.0" "license": "CC0-1.0",
"devDependencies": {},
"dependencies": {
"concat": "^1.0.3",
"imacss": "^1.0.0",
"imagemin-cli": "^3.0.0",
"mkdirp": "^0.5.1",
"rimraf": "^2.6.2",
"svgstore-cli": "^1.3.1"
}
} }