mirror of https://github.com/nextcloud/calendar
Add IconFont with checkboxes
Signed-off-by: Georg Ehrke <developer@georgehrke.com>
This commit is contained in:
parent
43b53ee466
commit
d6a2973ea8
|
@ -74,6 +74,7 @@ vendor/
|
|||
build/
|
||||
js/
|
||||
node_modules/
|
||||
src/fonts
|
||||
*.clover
|
||||
|
||||
# just sane ignores
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
/src/fonts
|
File diff suppressed because it is too large
Load Diff
|
@ -102,11 +102,13 @@
|
|||
"eslint-plugin-standard": "^4.0.1",
|
||||
"eslint-plugin-vue": "^5.2.3",
|
||||
"file-loader": "^6.0.0",
|
||||
"iconfont-plugin-webpack": "^1.1.4",
|
||||
"jest": "^26.4.1",
|
||||
"jest-serializer-vue": "^2.0.2",
|
||||
"node-sass": "^4.14.1",
|
||||
"prettier-eslint": "^11.0.0",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"resolve-url-loader": "^3.1.1",
|
||||
"sass-loader": "^9.0.3",
|
||||
"stylelint": "^13.6.1",
|
||||
"stylelint-bare-webpack-plugin": "^2.0.2",
|
||||
|
@ -114,6 +116,7 @@
|
|||
"stylelint-scss": "^3.18.0",
|
||||
"stylelint-webpack-plugin": "^2.1.0",
|
||||
"terser-webpack-plugin": "^4.1.0",
|
||||
"url-loader": "^4.1.0",
|
||||
"vue-jest": "^3.0.6",
|
||||
"vue-loader": "^15.9.3",
|
||||
"vue-template-compiler": "^2.6.12",
|
||||
|
|
|
@ -0,0 +1,24 @@
|
|||
# Automated icons font builder
|
||||
If you want to use an icon as a background on the components you need to use this tool.
|
||||
|
||||
1. Put any 16x16 icon in this folder with a proper filename
|
||||
2. On your component scss import the font scss: `@import '~Fonts/scss/iconfont-vue';`
|
||||
3. On your scss rule, use the `iconfont` mixin:
|
||||
``` scss
|
||||
.icon-test {
|
||||
@include iconfont('arrow-right-double');
|
||||
}
|
||||
```
|
||||
|
||||
# Results
|
||||
- Your scss selector will now use the `:before` pseudo-element with the unicode content matching your icon.
|
||||
``` scss
|
||||
.icon-test:before {
|
||||
font-family: 'iconfont-vue';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
content: "\EA03";
|
||||
}
|
||||
```
|
||||
|
||||
- The font will automatically be embeded on the library.
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13.5 0h-11C1.2 0 .1 1.1.1 2.4v11.1c0 1.3 1.1 2.4 2.4 2.4h11c1.3 0 2.4-1.1 2.4-2.4V2.4c0-1.3-1.1-2.4-2.4-2.4zM6.7 12.7L2.2 8.1l1.5-1.4 3 3.1L12.3 4l1.4 1.4-7 7.3z"/></svg>
|
After Width: | Height: | Size: 241 B |
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13.5-.1h-11C1.1-.1 0 1 0 2.4v11.2c0 1.4 1.1 2.5 2.5 2.5h11.1c1.4 0 2.5-1.1 2.5-2.5V2.4C16 1 14.9-.1 13.5-.1zm.6 14.3H1.9V1.8h12.2v12.4z"/></svg>
|
After Width: | Height: | Size: 215 B |
|
@ -3,6 +3,14 @@ const webpack = require('webpack')
|
|||
const { VueLoaderPlugin } = require('vue-loader')
|
||||
const StyleLintPlugin = require('stylelint-webpack-plugin')
|
||||
|
||||
const IconfontPlugin = require('iconfont-plugin-webpack')
|
||||
|
||||
const md5 = require('md5')
|
||||
const appVersion = JSON.stringify(process.env.npm_package_version)
|
||||
const versionHash = md5(appVersion).substr(0, 7)
|
||||
const SCOPE_VERSION = JSON.stringify(versionHash)
|
||||
const ICONFONT_NAME = `iconfont-calendar-app-${versionHash}`
|
||||
|
||||
module.exports = {
|
||||
entry: path.join(__dirname, 'src', 'main.js'),
|
||||
output: {
|
||||
|
@ -15,11 +23,31 @@ module.exports = {
|
|||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['vue-style-loader', 'css-loader']
|
||||
use: ['vue-style-loader', 'css-loader', 'resolve-url-loader']
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: ['vue-style-loader', 'css-loader', 'sass-loader']
|
||||
use: [
|
||||
'vue-style-loader',
|
||||
'css-loader',
|
||||
'resolve-url-loader',
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
additionalData: `$scope_version:${SCOPE_VERSION};`,
|
||||
/**
|
||||
* ! needed for resolve-url-loader
|
||||
*/
|
||||
sourceMap: true,
|
||||
sassOptions: {
|
||||
sourceMapContents: false,
|
||||
includePaths: [
|
||||
path.resolve(__dirname, './src/assets'),
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /src\/.*\.(js|vue)$/,
|
||||
|
@ -45,12 +73,23 @@ module.exports = {
|
|||
exclude: /node_modules\/(?!(p-limit|p-defer|p-queue|p-try|cdav-library|calendar-js))/
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif|svg)$/,
|
||||
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/i,
|
||||
loader: 'url-loader'
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new IconfontPlugin({
|
||||
src: './src/assets/iconfont',
|
||||
family: ICONFONT_NAME,
|
||||
dest: {
|
||||
font: './src/fonts/[family].[type]',
|
||||
css: './src/fonts/scss/iconfont-calendar-app.scss'
|
||||
},
|
||||
watch: {
|
||||
pattern: './src/assets/iconfont/*.svg'
|
||||
}
|
||||
}),
|
||||
new VueLoaderPlugin(),
|
||||
new StyleLintPlugin(),
|
||||
new webpack.IgnorePlugin(/^\.\/locale(s)?$/, /(moment)$/),
|
||||
|
|
Loading…
Reference in New Issue