6

vant 引入icon 字体图标

 2 years ago
source link: https://segmentfault.com/a/1190000040711833
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

vant 引入icon 字体图标

发布于 今天 05:49

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";
}


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK