chore: add vant-icons package

This commit is contained in:
陈嘉涵 2019-08-21 15:28:14 +08:00
parent 00299c9790
commit 2bc72c064b
17 changed files with 5165 additions and 0 deletions

1
packages/vant-icons/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
assets/svg

View File

@ -0,0 +1,6 @@
plugins:
- removeAttrs:
attrs:
- 'fill'
- 'stroke'

View File

@ -0,0 +1,68 @@
## Changelog
## 1.1.13
- fix gift-o、refund-o icon incomplete
## 1.1.12
- fix service-o icon incomplete
## 1.1.11
- add smile、music、thumb-circle、phone-circle icon
## 1.1.10
- add warning、good-job、good-job-o icon
## 1.1.9
- update checked、comment、comment-o icon
## 1.1.8
- update location-o icon
## 1.1.7
- fix new incomplete display
- fix question incomplete display
## 1.1.6
- update new icon & hot icon
## 1.1.5
- update share icon & edit icon
## 1.1.4
- update shop icons
## 1.1.3
- fix missing new icon
## 1.1.2
- optimize icon round corders
## 1.0.9
- add weapp-nav icon
## 1.0.8
- add more icons
- fix icon round lines
- fix align of comment icon
## 1.0.7
- add new-o icon
## 1.0.6
- add cart-circle icon

View File

@ -0,0 +1,33 @@
# Vant Icons
## Install
#### NPM
```shell
npm i @vant/icons -S
```
#### YARN
```shell
yarn add @vant/icons
```
## Document
- [Usage in Vue](https://youzan.github.io/vant/#/zh-CN/icon)
- [Usage in Weapp](https://youzan.github.io/vant-weapp/#/icon)
## Contribution
### Update Icons
1. Update assets/icons.sketch
2. Make a Pull Request
### Add New Icon
1. Add new icon to assets/icons.sketch
2. Add icon name to src/config.js
3. Make a Pull Request

Binary file not shown.

View File

@ -0,0 +1,21 @@
const fs = require('fs-extra');
const path = require('path');
const config = require('../src/config');
function template(fontName, ttf) {
return `@font-face {
font-style: normal;
font-weight: normal;
font-family: '${fontName}';
src: url('${ttf}') format('truetype');
}
`;
}
module.exports = function encode(fontName, srcDir) {
const ttfBase64 = fs.readFileSync(`../src/${fontName}.ttf`, 'base64');
fs.writeFileSync(
path.join(srcDir, 'encode.less'),
template(config.name, `data:font/ttf;base64,${ttfBase64}`)
);
};

View File

@ -0,0 +1,63 @@
/**
* build iconfont from sketch
*/
const { src, dest, series } = require('gulp');
const fs = require('fs-extra');
const path = require('path');
const glob = require('fast-glob');
const shell = require('shelljs');
const encode = require('./build-encode');
const md5File = require('md5-file');
const iconfont = require('gulp-iconfont');
const iconfontCss = require('gulp-iconfont-css');
const config = require('../src/config');
const srcDir = path.join(__dirname, '../src');
const svgDir = path.join(__dirname, '../assets/svg');
const sketch = path.join(__dirname, '../assets/icons.sketch');
const template = path.join(__dirname, './template.tpl');
const formats = ['ttf', 'woff', 'woff2'];
// get md5 from sketch
const md5 = md5File.sync(sketch).slice(0, 6);
const fontName = `${config.name}-${md5}`;
// remove previous fonts
const prevFonts = glob.sync(formats.map(ext => path.join(srcDir, '*.' + ext)));
prevFonts.forEach(font => fs.removeSync(font));
// generate font from svg && build index.less
function font() {
return src([`${svgDir}/*.svg`])
.pipe(
iconfontCss({
fontName: config.name,
path: template,
targetPath: '../src/index.less',
normalize: true,
firstGlyph: 0xf000,
cssClass: fontName // this is a trick to pass fontName to template
})
)
.pipe(
iconfont({
fontName,
formats
})
)
.pipe(dest(srcDir));
}
function upload(done) {
// generate encode.less
encode(fontName, srcDir);
// upload font to cdn
formats.forEach(ext => {
shell.exec(`superman-cdn /vant ${path.join(srcDir, fontName + '.' + ext)}`);
});
done();
}
exports.default = series(font, upload);

View File

@ -0,0 +1,18 @@
const fs = require('fs-extra');
const path = require('path');
const shell = require('shelljs');
const svgDir = path.join(__dirname, '../assets/svg');
const sketch = path.join(__dirname, '../assets/icons.sketch');
const SKETCH_TOOL_DIR = '/Applications/Sketch.app/Contents/Resources/sketchtool/bin/sketchtool';
fs.removeSync(svgDir);
// extract svg from sketch
// should install sketchtool first
// install guide: https://developer.sketchapp.com/guides/sketchtool/
shell.exec(
`${SKETCH_TOOL_DIR} export slices --formats=svg --overwriting=YES --save-for-web=YES --output=${svgDir} ${sketch}`
);
shell.exec('svgo ./assets/svg/*.svg');

View File

@ -0,0 +1,27 @@
@font-face {
font-style: normal;
font-weight: normal;
font-family: '<%= fontName %>';
src: url('https://img.yzcdn.cn/vant/<%= cssClass %>.woff2') format('woff2'),
url('https://img.yzcdn.cn/vant/<%= cssClass %>.woff') format('woff'),
url('https://img.yzcdn.cn/vant/<%= cssClass %>.ttf') format('truetype');
}
.van-icon {
position: relative;
display: inline-block;
font: normal normal normal 14px/1 "<%= fontName %>";
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
&::before {
display: inline-block;
}
}
<% _.each(glyphs, function(glyph) { %>.van-icon-<%= glyph.fileName %>:before {
content: "\<%= glyph.codePoint %>";
}
<% }); %>

View File

@ -0,0 +1,29 @@
{
"name": "@vant/icons",
"version": "1.1.13",
"description": "vant icons",
"main": "./src/config.js",
"files": [
"src"
],
"publishConfig": {
"access": "public"
},
"scripts": {
"export": "node ./build/export.js",
"build": "npm run export && gulp --gulpfile ./build/build-iconfont.js",
"release": "npm run build && npm publish"
},
"license": "MIT",
"repository": "https://github.com/youzan/vant/tree/dev/packages/vant-icons",
"devDependencies": {
"fast-glob": "^3.0.0",
"fs-extra": "^8.0.1",
"gulp": "^4.0.2",
"gulp-iconfont": "^10.0.3",
"gulp-iconfont-css": "^3.0.0",
"md5-file": "^4.0.0",
"shelljs": "^0.8.3",
"svgo": "^1.2.2"
}
}

View File

@ -0,0 +1,238 @@
module.exports = {
name: 'vant-icon',
basic: [
'success',
'plus',
'cross',
'fail',
'arrow',
'arrow-left',
'arrow-up',
'arrow-down'
],
outline: [
// has corresponding filled icon
'location-o',
'like-o',
'star-o',
'phone-o',
'setting-o',
'fire-o',
'coupon-o',
'cart-o',
'shopping-cart-o',
'cart-circle-o',
'friends-o',
'comment-o',
'gem-o',
'gift-o',
'point-gift-o',
'send-gift-o',
'service-o',
'bag-o',
'todo-list-o',
'balance-list-o',
'close',
'clock-o',
'question-o',
'passed',
'add-o',
'gold-coin-o',
'info-o',
'play-circle-o',
'pause-circle-o',
'stop-circle-o',
'warning-o',
'phone-circle-o',
'music-o',
'smile-o',
'thumb-circle-o',
'comment-circle-o',
'browsing-history-o',
'underway-o',
'more-o',
'video-o',
'shop-o',
'shop-collect-o',
'chat-o',
'smile-comment-o',
'vip-card-o',
'award-o',
'diamond-o',
'volume-o',
'cluster-o',
'photo-o',
'gift-card-o',
'expand-o',
'medel-o',
'good-job-o',
'manager-o',
'label-o',
'bookmark-o',
'bill-o',
'hot-o',
'hot-sale-o',
'new-o',
'new-arrival-o',
'goods-collect-o',
'eye-o',
// without corresponding filled icon
'balance-o',
'refund-o',
'birthday-cake-o',
'user-o',
'orders-o',
'tv-o',
'envelop-o',
'flag-o',
'flower-o',
'filter-o',
'bar-chart-o',
'chart-trending-o',
'brush-o',
'bullhorn-o',
'hotel-o',
'cashier-o',
'newspaper-o',
'warn-o',
'notes-o',
'calender-o',
'bulb-o',
'user-circle-o',
'desktop-o',
'apps-o',
'home-o',
'share',
'search',
'points',
'edit',
'delete',
'qr',
'qr-invalid',
'closed-eye',
'wap-home',
'scan',
'free-postage',
'certificate',
'logistics',
'contact',
'cash-back-record',
'after-sale',
'exchange',
'upgrade',
'ellipsis',
'circle',
'description',
'records',
'sign',
'completed',
'failure',
'ecard-pay',
'peer-pay',
'balance-pay',
'credit-pay',
'debit-pay',
'cash-on-deliver',
'other-pay',
'tosend',
'pending-payment',
'paid',
'aim',
'discount',
'idcard',
'replay',
'shrink'
],
filled: [
// has corresponding outline icon
'location',
'like',
'star',
'phone',
'setting',
'fire',
'coupon',
'cart',
'shopping-cart',
'cart-circle',
'friends',
'comment',
'gem',
'gift',
'point-gift',
'send-gift',
'service',
'bag',
'todo-list',
'balance-list',
'clear',
'clock',
'question',
'checked',
'add',
'gold-coin',
'info',
'play-circle',
'pause-circle',
'stop-circle',
'warning',
'phone-circle',
'music',
'smile',
'thumb-circle',
'comment-circle',
'browsing-history',
'underway',
'more',
'video',
'shop',
'shop-collect',
'chat',
'smile-comment',
'vip-card',
'award',
'diamond',
'volume',
'cluster',
'photo',
'gift-card',
'expand',
'medel',
'good-job',
'manager',
'label',
'bookmark',
'bill',
'hot',
'hot-sale',
'new',
'new-arrival',
'goods-collect',
'eye',
// without corresponding outline icon
'alipay',
'wechat',
'photograph',
'youzan-shield',
'umbrella-circle',
'bell',
'printer',
'map-marked',
'card',
'add-square',
'live',
'lock',
'audio',
'graphic',
'column',
'invition',
'play',
'pause',
'stop',
'weapp-nav',
'ascending',
'descending',
'bars',
'wap-nav'
]
};

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,926 @@
@font-face {
font-style: normal;
font-weight: normal;
font-family: 'vant-icon';
src: url('https://img.yzcdn.cn/vant/vant-icon-3a7dc2.woff2') format('woff2'),
url('https://img.yzcdn.cn/vant/vant-icon-3a7dc2.woff') format('woff'),
url('https://img.yzcdn.cn/vant/vant-icon-3a7dc2.ttf') format('truetype');
}
.van-icon {
position: relative;
display: inline-block;
font: normal normal normal 14px/1 "vant-icon";
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
&::before {
display: inline-block;
}
}
.van-icon-add-o:before {
content: "\F000";
}
.van-icon-add-square:before {
content: "\F001";
}
.van-icon-add:before {
content: "\F002";
}
.van-icon-after-sale:before {
content: "\F003";
}
.van-icon-aim:before {
content: "\F004";
}
.van-icon-alipay:before {
content: "\F005";
}
.van-icon-apps-o:before {
content: "\F006";
}
.van-icon-arrow-down:before {
content: "\F007";
}
.van-icon-arrow-left:before {
content: "\F008";
}
.van-icon-arrow-up:before {
content: "\F009";
}
.van-icon-arrow:before {
content: "\F00A";
}
.van-icon-ascending:before {
content: "\F00B";
}
.van-icon-audio:before {
content: "\F00C";
}
.van-icon-award-o:before {
content: "\F00D";
}
.van-icon-award:before {
content: "\F00E";
}
.van-icon-bag-o:before {
content: "\F00F";
}
.van-icon-bag:before {
content: "\F010";
}
.van-icon-balance-list-o:before {
content: "\F011";
}
.van-icon-balance-list:before {
content: "\F012";
}
.van-icon-balance-o:before {
content: "\F013";
}
.van-icon-balance-pay:before {
content: "\F014";
}
.van-icon-bar-chart-o:before {
content: "\F015";
}
.van-icon-bars:before {
content: "\F016";
}
.van-icon-bell:before {
content: "\F017";
}
.van-icon-bill-o:before {
content: "\F018";
}
.van-icon-bill:before {
content: "\F019";
}
.van-icon-birthday-cake-o:before {
content: "\F01A";
}
.van-icon-bookmark-o:before {
content: "\F01B";
}
.van-icon-bookmark:before {
content: "\F01C";
}
.van-icon-browsing-history-o:before {
content: "\F01D";
}
.van-icon-browsing-history:before {
content: "\F01E";
}
.van-icon-brush-o:before {
content: "\F01F";
}
.van-icon-bulb-o:before {
content: "\F020";
}
.van-icon-bullhorn-o:before {
content: "\F021";
}
.van-icon-calender-o:before {
content: "\F022";
}
.van-icon-card:before {
content: "\F023";
}
.van-icon-cart-circle-o:before {
content: "\F024";
}
.van-icon-cart-circle:before {
content: "\F025";
}
.van-icon-cart-o:before {
content: "\F026";
}
.van-icon-cart:before {
content: "\F027";
}
.van-icon-cash-back-record:before {
content: "\F028";
}
.van-icon-cash-on-deliver:before {
content: "\F029";
}
.van-icon-cashier-o:before {
content: "\F02A";
}
.van-icon-certificate:before {
content: "\F02B";
}
.van-icon-chart-trending-o:before {
content: "\F02C";
}
.van-icon-chat-o:before {
content: "\F02D";
}
.van-icon-chat:before {
content: "\F02E";
}
.van-icon-checked:before {
content: "\F02F";
}
.van-icon-circle:before {
content: "\F030";
}
.van-icon-clear:before {
content: "\F031";
}
.van-icon-clock-o:before {
content: "\F032";
}
.van-icon-clock:before {
content: "\F033";
}
.van-icon-close:before {
content: "\F034";
}
.van-icon-closed-eye:before {
content: "\F035";
}
.van-icon-cluster-o:before {
content: "\F036";
}
.van-icon-cluster:before {
content: "\F037";
}
.van-icon-column:before {
content: "\F038";
}
.van-icon-comment-circle-o:before {
content: "\F039";
}
.van-icon-comment-circle:before {
content: "\F03A";
}
.van-icon-comment-o:before {
content: "\F03B";
}
.van-icon-comment:before {
content: "\F03C";
}
.van-icon-completed:before {
content: "\F03D";
}
.van-icon-contact:before {
content: "\F03E";
}
.van-icon-coupon-o:before {
content: "\F03F";
}
.van-icon-coupon:before {
content: "\F040";
}
.van-icon-credit-pay:before {
content: "\F041";
}
.van-icon-cross:before {
content: "\F042";
}
.van-icon-debit-pay:before {
content: "\F043";
}
.van-icon-delete:before {
content: "\F044";
}
.van-icon-descending:before {
content: "\F045";
}
.van-icon-description:before {
content: "\F046";
}
.van-icon-desktop-o:before {
content: "\F047";
}
.van-icon-diamond-o:before {
content: "\F048";
}
.van-icon-diamond:before {
content: "\F049";
}
.van-icon-discount:before {
content: "\F04A";
}
.van-icon-ecard-pay:before {
content: "\F04B";
}
.van-icon-edit:before {
content: "\F04C";
}
.van-icon-ellipsis:before {
content: "\F04D";
}
.van-icon-empty:before {
content: "\F04E";
}
.van-icon-envelop-o:before {
content: "\F04F";
}
.van-icon-exchange:before {
content: "\F050";
}
.van-icon-expand-o:before {
content: "\F051";
}
.van-icon-expand:before {
content: "\F052";
}
.van-icon-eye-o:before {
content: "\F053";
}
.van-icon-eye:before {
content: "\F054";
}
.van-icon-fail:before {
content: "\F055";
}
.van-icon-failure:before {
content: "\F056";
}
.van-icon-filter-o:before {
content: "\F057";
}
.van-icon-fire-o:before {
content: "\F058";
}
.van-icon-fire:before {
content: "\F059";
}
.van-icon-flag-o:before {
content: "\F05A";
}
.van-icon-flower-o:before {
content: "\F05B";
}
.van-icon-free-postage:before {
content: "\F05C";
}
.van-icon-friends-o:before {
content: "\F05D";
}
.van-icon-friends:before {
content: "\F05E";
}
.van-icon-gem-o:before {
content: "\F05F";
}
.van-icon-gem:before {
content: "\F060";
}
.van-icon-gift-card-o:before {
content: "\F061";
}
.van-icon-gift-card:before {
content: "\F062";
}
.van-icon-gift-o:before {
content: "\F063";
}
.van-icon-gift:before {
content: "\F064";
}
.van-icon-gold-coin-o:before {
content: "\F065";
}
.van-icon-gold-coin:before {
content: "\F066";
}
.van-icon-good-job-o:before {
content: "\F067";
}
.van-icon-good-job:before {
content: "\F068";
}
.van-icon-goods-collect-o:before {
content: "\F069";
}
.van-icon-goods-collect:before {
content: "\F06A";
}
.van-icon-graphic:before {
content: "\F06B";
}
.van-icon-home-o:before {
content: "\F06C";
}
.van-icon-hot-o:before {
content: "\F06D";
}
.van-icon-hot-sale-o:before {
content: "\F06E";
}
.van-icon-hot-sale:before {
content: "\F06F";
}
.van-icon-hot:before {
content: "\F070";
}
.van-icon-hotel-o:before {
content: "\F071";
}
.van-icon-idcard:before {
content: "\F072";
}
.van-icon-info-o:before {
content: "\F073";
}
.van-icon-info:before {
content: "\F074";
}
.van-icon-invition:before {
content: "\F075";
}
.van-icon-label-o:before {
content: "\F076";
}
.van-icon-label:before {
content: "\F077";
}
.van-icon-like-o:before {
content: "\F078";
}
.van-icon-like:before {
content: "\F079";
}
.van-icon-live:before {
content: "\F07A";
}
.van-icon-location-o:before {
content: "\F07B";
}
.van-icon-location:before {
content: "\F07C";
}
.van-icon-lock:before {
content: "\F07D";
}
.van-icon-logistics:before {
content: "\F07E";
}
.van-icon-manager-o:before {
content: "\F07F";
}
.van-icon-manager:before {
content: "\F080";
}
.van-icon-map-marked:before {
content: "\F081";
}
.van-icon-medel-o:before {
content: "\F082";
}
.van-icon-medel:before {
content: "\F083";
}
.van-icon-more-o:before {
content: "\F084";
}
.van-icon-more:before {
content: "\F085";
}
.van-icon-music-o:before {
content: "\F086";
}
.van-icon-music:before {
content: "\F087";
}
.van-icon-new-arrival-o:before {
content: "\F088";
}
.van-icon-new-arrival:before {
content: "\F089";
}
.van-icon-new-o:before {
content: "\F08A";
}
.van-icon-new:before {
content: "\F08B";
}
.van-icon-newspaper-o:before {
content: "\F08C";
}
.van-icon-notes-o:before {
content: "\F08D";
}
.van-icon-orders-o:before {
content: "\F08E";
}
.van-icon-other-pay:before {
content: "\F08F";
}
.van-icon-paid:before {
content: "\F090";
}
.van-icon-passed:before {
content: "\F091";
}
.van-icon-pause-circle-o:before {
content: "\F092";
}
.van-icon-pause-circle:before {
content: "\F093";
}
.van-icon-pause:before {
content: "\F094";
}
.van-icon-peer-pay:before {
content: "\F095";
}
.van-icon-pending-payment:before {
content: "\F096";
}
.van-icon-phone-circle-o:before {
content: "\F097";
}
.van-icon-phone-circle:before {
content: "\F098";
}
.van-icon-phone-o:before {
content: "\F099";
}
.van-icon-phone:before {
content: "\F09A";
}
.van-icon-photo-o:before {
content: "\F09B";
}
.van-icon-photo:before {
content: "\F09C";
}
.van-icon-photograph:before {
content: "\F09D";
}
.van-icon-play-circle-o:before {
content: "\F09E";
}
.van-icon-play-circle:before {
content: "\F09F";
}
.van-icon-play:before {
content: "\F0A0";
}
.van-icon-plus:before {
content: "\F0A1";
}
.van-icon-point-gift-o:before {
content: "\F0A2";
}
.van-icon-point-gift:before {
content: "\F0A3";
}
.van-icon-points:before {
content: "\F0A4";
}
.van-icon-printer:before {
content: "\F0A5";
}
.van-icon-qr-invalid:before {
content: "\F0A6";
}
.van-icon-qr:before {
content: "\F0A7";
}
.van-icon-question-o:before {
content: "\F0A8";
}
.van-icon-question:before {
content: "\F0A9";
}
.van-icon-records:before {
content: "\F0AA";
}
.van-icon-refund-o:before {
content: "\F0AB";
}
.van-icon-replay:before {
content: "\F0AC";
}
.van-icon-scan:before {
content: "\F0AD";
}
.van-icon-search:before {
content: "\F0AE";
}
.van-icon-send-gift-o:before {
content: "\F0AF";
}
.van-icon-send-gift:before {
content: "\F0B0";
}
.van-icon-service-o:before {
content: "\F0B1";
}
.van-icon-service:before {
content: "\F0B2";
}
.van-icon-setting-o:before {
content: "\F0B3";
}
.van-icon-setting:before {
content: "\F0B4";
}
.van-icon-share:before {
content: "\F0B5";
}
.van-icon-shop-collect-o:before {
content: "\F0B6";
}
.van-icon-shop-collect:before {
content: "\F0B7";
}
.van-icon-shop-o:before {
content: "\F0B8";
}
.van-icon-shop:before {
content: "\F0B9";
}
.van-icon-shopping-cart-o:before {
content: "\F0BA";
}
.van-icon-shopping-cart:before {
content: "\F0BB";
}
.van-icon-shrink:before {
content: "\F0BC";
}
.van-icon-sign:before {
content: "\F0BD";
}
.van-icon-smile-comment-o:before {
content: "\F0BE";
}
.van-icon-smile-comment:before {
content: "\F0BF";
}
.van-icon-smile-o:before {
content: "\F0C0";
}
.van-icon-smile:before {
content: "\F0C1";
}
.van-icon-star-o:before {
content: "\F0C2";
}
.van-icon-star:before {
content: "\F0C3";
}
.van-icon-stop-circle-o:before {
content: "\F0C4";
}
.van-icon-stop-circle:before {
content: "\F0C5";
}
.van-icon-stop:before {
content: "\F0C6";
}
.van-icon-success:before {
content: "\F0C7";
}
.van-icon-thumb-circle-o:before {
content: "\F0C8";
}
.van-icon-thumb-circle:before {
content: "\F0C9";
}
.van-icon-todo-list-o:before {
content: "\F0CA";
}
.van-icon-todo-list:before {
content: "\F0CB";
}
.van-icon-tosend:before {
content: "\F0CC";
}
.van-icon-tv-o:before {
content: "\F0CD";
}
.van-icon-umbrella-circle:before {
content: "\F0CE";
}
.van-icon-underway-o:before {
content: "\F0CF";
}
.van-icon-underway:before {
content: "\F0D0";
}
.van-icon-upgrade:before {
content: "\F0D1";
}
.van-icon-user-circle-o:before {
content: "\F0D2";
}
.van-icon-user-o:before {
content: "\F0D3";
}
.van-icon-video-o:before {
content: "\F0D4";
}
.van-icon-video:before {
content: "\F0D5";
}
.van-icon-vip-card-o:before {
content: "\F0D6";
}
.van-icon-vip-card:before {
content: "\F0D7";
}
.van-icon-volume-o:before {
content: "\F0D8";
}
.van-icon-volume:before {
content: "\F0D9";
}
.van-icon-wap-home:before {
content: "\F0DA";
}
.van-icon-wap-nav:before {
content: "\F0DB";
}
.van-icon-warn-o:before {
content: "\F0DC";
}
.van-icon-warning-o:before {
content: "\F0DD";
}
.van-icon-warning:before {
content: "\F0DE";
}
.van-icon-weapp-nav:before {
content: "\F0DF";
}
.van-icon-wechat:before {
content: "\F0E0";
}
.van-icon-youzan-shield:before {
content: "\F0E1";
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

File diff suppressed because it is too large Load Diff