mirror of
https://github.com/tabler/tabler-icons.git
synced 2025-03-15 16:49:43 +01:00
readme fixes, png images of icons
This commit is contained in:
codecalm
parent
e58f56dadb
commit
286ad57d9e
BIN
.github/icons-stroke.png
vendored
Normal file
BIN
.github/icons-stroke.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
22
.github/icons-stroke.svg
vendored
22
.github/icons-stroke.svg
vendored
@ -1,19 +1,19 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 394 74" width="394" height="74" style="color: #354052"><rect x="0" y="0" width="394" height="74" fill="#fff"></rect>
|
||||
<symbol id="icon-.5" class="icon tabler-icon tabler-icon-disabled" viewBox="0 0 24 24" stroke-width=".5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 106 7.5" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 234 42" width="234" height="42" style="color: #354052"><rect x="0" y="0" width="234" height="42" fill="#fff"></rect>
|
||||
<symbol id="icon-.5" class="icon icon-tabler icon-tabler-disabled" viewBox="0 0 24 24" stroke-width=".5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="0" y="0" width="24" height="24" stroke="none"></rect><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 1 0 6 7.5" />
|
||||
</symbol>
|
||||
<symbol id="icon-1" class="icon tabler-icon tabler-icon-disabled" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 106 7.5" />
|
||||
<symbol id="icon-1" class="icon icon-tabler icon-tabler-disabled" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="0" y="0" width="24" height="24" stroke="none"></rect><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 1 0 6 7.5" />
|
||||
</symbol>
|
||||
<symbol id="icon-1.5" class="icon tabler-icon tabler-icon-disabled" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 106 7.5" />
|
||||
<symbol id="icon-1.5" class="icon icon-tabler icon-tabler-disabled" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="0" y="0" width="24" height="24" stroke="none"></rect><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 1 0 6 7.5" />
|
||||
</symbol>
|
||||
<symbol id="icon-2" class="icon tabler-icon tabler-icon-disabled" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 106 7.5" />
|
||||
<symbol id="icon-2" class="icon icon-tabler icon-tabler-disabled" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="0" y="0" width="24" height="24" stroke="none"></rect><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 1 0 6 7.5" />
|
||||
</symbol>
|
||||
<symbol id="icon-2.75" class="icon tabler-icon tabler-icon-disabled" viewBox="0 0 24 24" stroke-width="2.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 106 7.5" />
|
||||
<symbol id="icon-2.75" class="icon icon-tabler icon-tabler-disabled" viewBox="0 0 24 24" stroke-width="2.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="0" y="0" width="24" height="24" stroke="none"></rect><circle cx="11" cy="5" r="2" /><polyline points="11 7 11 15 15 15 19 20" /><line x1="11" y1="11" x2="16" y2="11" /><path d="M7 11.5a5 5 0 1 0 6 7.5" />
|
||||
</symbol>
|
||||
|
||||
<use xlink:href="#icon-.5" x="5" y="5" width="64" height="64" />
|
||||
<use xlink:href="#icon-1" x="85" y="5" width="64" height="64" />
|
||||
<use xlink:href="#icon-1.5" x="165" y="5" width="64" height="64" />
|
||||
<use xlink:href="#icon-2" x="245" y="5" width="64" height="64" />
|
||||
<use xlink:href="#icon-2.75" x="325" y="5" width="64" height="64" />
|
||||
<use xlink:href="#icon-.5" x="5" y="5" width="32" height="32" />
|
||||
<use xlink:href="#icon-1" x="53" y="5" width="32" height="32" />
|
||||
<use xlink:href="#icon-1.5" x="101" y="5" width="32" height="32" />
|
||||
<use xlink:href="#icon-2" x="149" y="5" width="32" height="32" />
|
||||
<use xlink:href="#icon-2.75" x="197" y="5" width="32" height="32" />
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.6 KiB |
BIN
.github/icons.png
vendored
BIN
.github/icons.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 173 KiB |
@ -2,11 +2,11 @@
|
||||
|
||||
A set of over 300 free MIT-licensed high-quality SVG icons for you to use in your web projects. Each icon is designed on a 24x24 grid and a `2px` stroke.
|
||||
|
||||
**If you want to support my project and help me grow it, you can [become a sponsor on GitHub](https://github.com/sponsors/codecalm)!**
|
||||
**If you want to support my project and help me grow it, you can [become a sponsor on GitHub](https://github.com/sponsors/codecalm) or just [donate me on PayPal](https://paypal.me/codecalm) 🙂**
|
||||
|
||||
## Preview
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
@ -71,7 +71,7 @@ Add an icon to be displayed on your page with the following markup (`activity` i
|
||||
|
||||
All icons in this repository have been created with the value of the `stroke-width` property, so if you change the value, you can get different icon variants that will fit in well with your design.
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
|
||||
|
||||
154
gulpfile.js
154
gulpfile.js
@ -49,8 +49,9 @@ const createScreenshot = async (filePath) => {
|
||||
const page = await browser.newPage();
|
||||
|
||||
await page.setViewport({
|
||||
height: 100,
|
||||
width: 100
|
||||
height: 10,
|
||||
width: 10,
|
||||
deviceScaleFactor: 2
|
||||
});
|
||||
|
||||
await page.goto(htmlFilePath);
|
||||
@ -68,6 +69,77 @@ const createScreenshot = async (filePath) => {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const printChangelog = function(newIcons, modifiedIcons, renamedIcons) {
|
||||
if(newIcons.length > 0) {
|
||||
let str = '';
|
||||
str += `${newIcons.length} new icons: `;
|
||||
|
||||
newIcons.forEach(function(icon, i){
|
||||
str += `\`${icon}\``;
|
||||
|
||||
if((i + 1) <= newIcons.length - 1) {
|
||||
str += ', '
|
||||
}
|
||||
});
|
||||
|
||||
console.log(str);
|
||||
console.log('');
|
||||
}
|
||||
|
||||
if(modifiedIcons.length > 0) {
|
||||
let str = '';
|
||||
str += `Fixed icons: `;
|
||||
|
||||
modifiedIcons.forEach(function(icon, i){
|
||||
str += `\`${icon}\``;
|
||||
|
||||
if((i + 1) <= modifiedIcons.length - 1) {
|
||||
str += ', '
|
||||
}
|
||||
});
|
||||
|
||||
console.log(str);
|
||||
console.log('');
|
||||
}
|
||||
|
||||
if(renamedIcons.length > 0) {
|
||||
console.log(`Renamed icons: `);
|
||||
|
||||
renamedIcons.forEach(function(icon, i){
|
||||
console.log(`- \`${icon[0]}\` renamed to \`${icon[1]}\``);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
gulp.task('build-zip', function() {
|
||||
const version = p.version;
|
||||
|
||||
return gulp.src('{icons/**/*,icons-png/**/*,tabler-sprite.svg,tabler-sprite-nostroke.svg}')
|
||||
.pipe(zip(`tabler-icons-${version}.zip`))
|
||||
.pipe(gulp.dest('packages'))
|
||||
});
|
||||
|
||||
gulp.task('build-jekyll', function(cb){
|
||||
cp.exec('bundle exec jekyll build', function() {
|
||||
cb();
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('build-copy', function(cb){
|
||||
cp.exec('mkdir -p icons/ && rm -fd ./icons/* && cp ./_site/icons/* ./icons', function() {
|
||||
cb();
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('clean-png', function(cb){
|
||||
cp.exec('rm -fd ./icons-png/*', function() {
|
||||
cb();
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('icons-sprite', function (cb) {
|
||||
glob("_site/icons/*.svg", {}, function (er, files) {
|
||||
|
||||
@ -143,14 +215,14 @@ gulp.task('icons-preview', function (cb) {
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('icons-stroke', function (cb) {
|
||||
gulp.task('icons-stroke', gulp.series('build-jekyll', function (cb) {
|
||||
|
||||
const icon = "disabled",
|
||||
strokes = ['.5', '1', '1.5', '2', '2.75'],
|
||||
svgFileContent = fs.readFileSync(`_site/icons/${icon}.svg`).toString(),
|
||||
svgFileContent = fs.readFileSync(`icons/${icon}.svg`).toString(),
|
||||
padding = 16,
|
||||
paddingOuter = 5,
|
||||
iconSize = 64,
|
||||
iconSize = 32,
|
||||
width = (strokes.length * (iconSize + padding) - padding) + paddingOuter * 2,
|
||||
height = iconSize + paddingOuter * 2;
|
||||
|
||||
@ -174,10 +246,10 @@ gulp.task('icons-stroke', function (cb) {
|
||||
|
||||
const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" style="color: #354052"><rect x="0" y="0" width="${width}" height="${height}" fill="#fff"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>`;
|
||||
|
||||
fs.writeFileSync('icons-stroke.svg', svgContent);
|
||||
createScreenshot('icons-stroke.svg');
|
||||
fs.writeFileSync('.github/icons-stroke.svg', svgContent);
|
||||
createScreenshot('.github/icons-stroke.svg');
|
||||
cb();
|
||||
});
|
||||
}));
|
||||
|
||||
gulp.task('optimize', function (cb) {
|
||||
glob("src/_icons/*.svg", {}, function (er, files) {
|
||||
@ -202,31 +274,61 @@ gulp.task('optimize', function (cb) {
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('build-zip', function(cb) {
|
||||
|
||||
gulp.task('changelog-commit', function(cb) {
|
||||
cp.exec('git status', function(err, ret) {
|
||||
let newIcons = [], modifiedIcons = [], renamedIcons = [];
|
||||
|
||||
ret.replace(/new file:\s+src\/_icons\/([a-z1-9-]+)\.svg/g, function (m, fileName) {
|
||||
newIcons.push(fileName);
|
||||
});
|
||||
|
||||
ret.replace(/modified:\s+src\/_icons\/([a-z1-9-]+)\.svg/g, function (m, fileName) {
|
||||
modifiedIcons.push(fileName);
|
||||
});
|
||||
|
||||
ret.replace(/renamed:\s+src\/_icons\/([a-z1-9-]+).svg -> src\/_icons\/([a-z1-9-]+).svg/g, function (m, fileNameBefore, fileNameAfter) {
|
||||
renamedIcons.push([fileNameBefore, fileNameAfter]);
|
||||
});
|
||||
|
||||
modifiedIcons = modifiedIcons.filter( function( el ) {
|
||||
return newIcons.indexOf( el ) < 0;
|
||||
});
|
||||
|
||||
printChangelog(newIcons, modifiedIcons, renamedIcons);
|
||||
|
||||
cb();
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('changelog-diff', function(cb) {
|
||||
const version = p.version;
|
||||
cp.exec(`git diff v${version} HEAD --name-status`, function(err, ret) {
|
||||
|
||||
return gulp.src('{icons/**/*,icons-png/**/*,tabler-sprite.svg,tabler-sprite-nostroke.svg}')
|
||||
.pipe(zip(`tabler-icons-${version}.zip`))
|
||||
.pipe(gulp.dest('packages'))
|
||||
});
|
||||
let newIcons = [], modifiedIcons = [], renamedIcons = [];
|
||||
|
||||
ret.replace(/A\s+src\/_icons\/([a-z1-9-]+)\.svg/g, function (m, fileName) {
|
||||
newIcons.push(fileName);
|
||||
});
|
||||
|
||||
ret.replace(/M\s+src\/_icons\/([a-z1-9-]+)\.svg/g, function (m, fileName) {
|
||||
modifiedIcons.push(fileName);
|
||||
});
|
||||
|
||||
ret.replace(/R[0-9]+\s+src\/_icons\/([a-z1-9-]+)\.svg\s+src\/_icons\/([a-z1-9-]+).svg/g, function (m, fileNameBefore, fileNameAfter) {
|
||||
renamedIcons.push([fileNameBefore, fileNameAfter]);
|
||||
});
|
||||
|
||||
modifiedIcons = modifiedIcons.filter( function( el ) {
|
||||
return newIcons.indexOf( el ) < 0;
|
||||
});
|
||||
|
||||
printChangelog(newIcons, modifiedIcons, renamedIcons);
|
||||
|
||||
gulp.task('build-jekyll', function(cb){
|
||||
cp.exec('bundle exec jekyll build', function() {
|
||||
cb();
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('build-copy', function(cb){
|
||||
cp.exec('mkdir -p icons/ && rm -fd ./icons/* && cp ./_site/icons/* ./icons', function() {
|
||||
cb();
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('clean-png', function(cb){
|
||||
cp.exec('rm -fd ./icons-png/*', function() {
|
||||
cb();
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('svg-to-png', gulp.series('build-jekyll', 'clean-png', async (cb) => {
|
||||
let files = glob.sync("_site/icons/*.svg");
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user