Skip to content

AlpsBlue/vusion-iconmaker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 

Repository files navigation

vusion-iconmaker

安装

npm install iconfont-create-plugin

前置条件

本插件是webpack的loader,用于配合iconfont-create-plugin按需加载svg生成字体图标库,所以使用前确保已经引入vusion-iconmaker

本插件为vusion做支持,有兴趣可以关注一下

使用方式

// webpack配置,较为简单配置svg的loader为vusion-iconmaker即可。
const FontIconCreatePlugin = require('fonticon-create-plugin');

module.exports = {
    module: {
        rules: [
            { test: /\.svg$/, loader: 'vusion-iconmaker', include: path.join(__dirname, 'src/icons') },
            { test: /\.css$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' }] },
            { test: /\.(woff|eot|ttf|svg)$/, loader: 'url-loader', exclude: path.join(__dirname, 'src/icons') }
        ]
    },
    plugins: [
        new FontIconCreatePlugin({
            name:"icon",
            output:{
                font:"/src/iconfont",
                css:"/src/css/font",
                html:"/src/iconfont"
            },
            suffix:{
                css:".mcss"
            },
            publishPath:"/publish/font/"
        }),
    ],
}

引用方式

const $app = document.getElementById('app');

$app.innerHTML = `
<i class="${require('./icons/sound-off.svg')}"></i>
<i class="${require('./icons/sound-on.svg')}"></i>
<i class="${require('./icons/arrow-left.svg')}"></i>
<i class="${require('./icons/test/arrow-left.svg')}"></i>
<i class="${require('./icons/arrow-right.svg')}"></i>
<i class="${require('./icons/arrow-up.svg')}"></i>
`

示例直接使用了require的方式引入,使用import亦可,最终loader会直接返回生成的class名

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published