创建icons/svg文件夹将svg文件放在该文件夹下面在components文件夹中创建svgiconfont.vue文件文件内容：[removed] import '@/icons' export default {name: 'svg-icon',props: { iconClass: {type: String,required: true }, className: {type: String }},computed: { iconName() {return `#icon-${this.iconClass}` }, svgClass() {if (this.className) { console.log('svg-icon ' + this.className) return 'svg-icon ' + this.className} else { return 'svg-icon'} }},mounted: function() {} }[removed]style .svg-icon {width: 1em height: 1em vertical-align: -0.15em fill: currentColor overflow: hidden }创建index.js文件文件内容如下：import Vue from 'vue'import svgiconfont from '@/components/svgiconfont'// svg组件/*require.context有三个参数：directory：说明需要检索的目录useSubdirectories：是否检索子目录regExp: 匹配文件的正则表达式 */// 全局注册Vue.component('svg-icon', svgiconfont)const requireAll = requireContext =>requireContext.keys().map(requireContext)const req = require.context('./svg', false, /\.svg$/)requireAll(req)在main.js引入icons文件夹下即添加import ‘@/icons’修改webpack.base.conf.js添加代码：{test: /\.svg$/,loader: "svg-sprite-loader",include: [resolve("src/icons")],options: { symbolId: "icon-[name]"} }, {test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',exclude: [resolve("src/icons")],options: { limit: 50000, name: utils.assetsPath('img/[name].[hash:7].[ext]')} }使用方法在页面中添加css引用字体问题
在CSS中通过@font-face属性来实现网页中嵌入特殊字体。
首先获取要使用字体的三种文件格式.EOT、.TTF或.OTF、.SVG，确保能在主流浏览器中都能正常显示该字体。
.EOT，适用于Internet Explorer 4.0+
.TTF或.OTF，适用于Firefox 3.5、Safari、Opera
.SVG，适用于Chrome、IPhone
最常见的是.TTF文件，需要通过这种文件格式转换为其余两种文件格式。
在css中进行如下声明：
@font-face {
font-family: 'fontNameRegular'
src: url('fontName.eot')
src: local('fontName Regular'),
local('fontName'),
url('fontName.woff') format('woff'),
url('fontName.ttf') format('truetype'),
url('fontName.svg#fontName') format('svg')
}
/*其中fontName替换为你的字体名称*/
在css中使用这个字体
h1{font-family: fontNameRegular}
