Nuxt IconFont图标库使用
一、下载相应图标(以Symbol为例,其他两种差不多)
二、copy相关文件
三、Iconfont配置
1、将copy的文件放入 assets /fonts 文件夹下
2、nuxt.config.js下配置IconFont
四、使用
<svg class="icon" aria-hidden="true"> <use :xlink:href="#图标名称"></use> </svg> // 示例 <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>
五、iconfont组件
<!-- *** @description icon图标组件 ** --> <!-- ** * @use <yfn-icon :name="name"></yfn-icon> * @params参数说明: * @params {name} icon名称 * @params {size} icon大小, 默认 w*h => 24*24, unit: px * @params {w} icon 宽, 默认 24, unit: px * @params {h} icon 高, 默认 24, unit: px * @params {opacity} 透明度,默认 1 * @params {fill} 颜色 ** --> <template> <svg :class="['icon', name]" aria-hidden="true" :style="{width: (w || size) + 'px', height: (h || size) + 'px', opacity: opacity}" :fill="getFill(fill, name)" @click="handleIcon"> <use :xlink:href="`#${name}`"></use> </svg> </template> <script> export default { name: 'YfnIcon', props: { name: [String], w: [Number, String], h: [Number, String], size: { type: [Number, String], default: () => { return 24 } }, opacity: { type: [Number, String], default: () => { return 1 } }, fill: { type: [Number, String], default: () => { return '' } } }, data() { return {} }, methods: { getFill(fill, name) { if(fill || !name) return fill const defaultFill = { 'icon-question': '#AAA', 'icon-check-selected': '#333', 'icon-edit': '#666', 'icon-delete': '#666', 'icon-enlarge': '#666', 'icon-check': '#999', 'icon-right-grey': '#999', }; return defaultFill[name] || '' }, handleIcon(e) { this.$emit('click', e) } }, } </script> <style scoped lang='scss'> </style>