vant 引入icon 字体图标

tina666

Icon 组件默认引用有赞 CDN 提供的字体文件,并通过网络下载。如果需要在项目中使用本地字体文件,请引入下面的 CSS 文件,并在项目中配置 url-loader。

  1. 增加webpack.config.js配置
module.exports = function () {
  if (process.env.BUILD_TARGET === 'package') {
    return {};
  }

  return {
    entry: {
      'site-mobile': ['./docs/site/entry'],
      'site-desktop': ['./docs/site/entry'],
    },
    module:{
      rules:[
        {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
          }
        }
      ]
    }
  };

 
};

UnhandledPromiseRejectionWarning: ReferenceError: utils is not defined
url-loader 安装版本过高,安装一个低版本的,有安装2.0.0,3.0.0都不行,最终选择1.0.0

  1. 引入css文件
@import '../../packages/vant-icons/assets/iconfont/style.css';
  1. 修改style.css

设置font-family 和加前缀 van-icon
.van-icon-test:before {
content: "\e905";
}

阅读 209

别回头,别人随时有可能赶上你

387 声望
7 粉丝
0 条评论
你知道吗?

别回头,别人随时有可能赶上你

387 声望
7 粉丝
文章目录
宣传栏