添加字体图标的第二方案

[zxiaohong]

如需添加 vue-stone提供的字体图标以外的字体图标，请自行添加，方法如下：

1. 安装插件 webpack-iconfont-plugin-nodejs

npm install webpack-iconfont-plugin-nodejs

2. 在项目的build文件夹下，添加或修改svg2font.js

• 只需修改fontName和cssPrefix
• fontName对应字体图标的 font-family 名称，不要使用‘iconfonts’这个名字
• cssPrefix表示生成的字体图标的类名前缀

例如：

var WebpackIconfontPluginNodejs = require('webpack-iconfont-plugin-nodejs');

var path = require('path');
var options = {
    fontName: 'extra-icon',//字体图标 font-family 的名称，不要使用‘iconfonts’这个名字
    svgs: path.join(__dirname, '../', 'src/svgs/*.svg'),
    fontsOutput: path.join(__dirname, '../', 'src/styles/fonts/'),
    cssOutput: path.join(__dirname, '../', 'src/styles/font.css'),
    jsOutput: path.join(__dirname, '../', 'src/styles/fonts.js'),
    htmlOutput: path.join(__dirname, '../', 'src/styles/font-preview.html'),
    cssPrefix: 'ex-icon' // 字体图标类名前缀
};

new WebpackIconfontPluginNodejs(options).build();

3. 在src文件夹下新建svgs文件夹，并向svgs文件夹中添加自定义的.svg文件

如：

4. 执行 node 命令 node build/svg2font.js

就会生成相关的字体图标文件到 styles文件夹中
按照上面的配置生成的结果如下：

font-preview.html可以预览到你生成的字体图标及其名称

5. 在项目中引入fonts.css;

main.js中引入：

import '@/styles/font.css';