svg-icon使用教程

就是类似于这种小图标的使用

步骤来了~

① 安装依赖

 npm i svg-sprite-loader@4.1.3

② 配置

项目地下创建vue.config.js

const path = require('path')function resolve(dir) {return path.join(__dirname, dir)
}module.exports = {//  省略其他配置chainWebpack(config) {// set svg-sprite-loaderconfig.module.rule('svg').exclude.add(resolve('src/icons')).end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'}).end()}
}

③ 创建文件

一、src/components/svgIcon/index.vue

<template><div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /><svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"><use :xlink:href="iconName" /></svg>
</template><script>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
import { isExternal } from '@/utils/validate'export default {name: 'SvgIcon',props: {iconClass: {type: String,required: true},className: {type: String,default: ''}},computed: {isExternal() {return isExternal(this.iconClass)},iconName() {return `#icon-${this.iconClass}`},svgClass() {if (this.className) {return 'svg-icon ' + this.className} else {return 'svg-icon'}},styleExternalIcon() {return {mask: `url(${this.iconClass}) no-repeat 50% 50%`,'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`}}}
}
</script>
<style scoped>
.svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
.svg-external-icon {background-color: currentColor;mask-size: cover!important;display: inline-block;
}
</style>

二、这里需要引入一个utils/validate.js
检验规则

/*** Created by PanJiaChen on 16/11/18.*//*** @param {string} path* @returns {Boolean}*/export function isExternal(path) {return /^(https?:|mailto:|tel:)/.test(path)}/*** @param {string} str* @returns {Boolean}*/export function validUsername(str) {const valid_map = ['admin', 'editor']return valid_map.indexOf(str.trim()) >= 0}/*** @param {string} url* @returns {Boolean}*/export function validURL(url) {const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/return reg.test(url)}/*** @param {string} str* @returns {Boolean}*/export function validLowerCase(str) {const reg = /^[a-z]+$/return reg.test(str)}/*** @param {string} str* @returns {Boolean}*/export function validUpperCase(str) {const reg = /^[A-Z]+$/return reg.test(str)}/*** @param {string} str* @returns {Boolean}*/export function validAlphabets(str) {const reg = /^[A-Za-z]+$/return reg.test(str)}/*** @param {string} email* @returns {Boolean}*/export function validEmail(email) {const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/return reg.test(email)}/*** @param {string} str* @returns {Boolean}*/export function isString(str) {if (typeof str === 'string' || str instanceof String) {return true}return false}/*** @param {Array} arg* @returns {Boolean}*/export function isArray(arg) {if (typeof Array.isArray === 'undefined') {return Object.prototype.toString.call(arg) === '[object Array]'}return Array.isArray(arg)}

三、在src目录下创建文件夹

svg文件是你项目用到的图标文件.svg，可以在iconfont下载

src/icons/index.js

import Vue from 'vue'
import SvgIcon from '@/components/svgIcon'// svg component// register globally
Vue.component('svg-icon', SvgIcon)const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

④ 全局引入

main.js

import './icons' // icon

⑤ 组件使用

    <div><svg-icon icon-class="language" /></div>

svg-icon使用教程相关推荐

HTML/CSS——网页SVG ICON(小图标)解决方案
一.基本概念 SVG: SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大 ...
SVG 图像入门教程
http://www.ruanyifeng.com/blog/2018/08/svg.html 一.概述 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector ...
svg.js使用教程
在日常web开发过程中,我们会需要显示一些图形化的元素,使用div+css.ps图片是常见的实现方式. 但使用svg来绘制可能更加合适,SVG是可缩放矢量图形,有一些预定义的形状元素,可被开发者使用和 ...
android svg 线条动画教程,简单的SVG线条动画
[TOC] 看到网页中那种有如写字般的动画,觉得挺好玩的,就找了下制作方法,也比较简单,在此记录一下; 先上几张图看看: 简单的线条动画 ps4 用到的属性 stroke 定义边框颜色值; strok ...
android svg 线条动画教程,SVG之旅：SVG线条动画实现原理
对于SVG路径动画,我相信大家都看到过这样的动效:一条线就像它自己画自己.非常的酷.@Jake Archibald是这项技巧的先驱,他在自己的博客写了一篇非常好的文章来介绍SVG的线条动画是如何实现的 ...
svg载入html,SVG系列教程：SVG简介与嵌入HTML页面的方式
随着技术向前的推进,SVG相关的讨论也越渐频繁.为了紧跟时代的步伐,我也开始步入SVG相关技术的探索与学习之中.从这篇文章开始会在W3cplus站点上陆续向大家推出有关于SVG相关的教程.译文或案例等 ...
Vue3+TS使用element-plus 动态Icon图标
目录 1,前言 2,使用 2.1,方式一 2.2,方式二 1,前言源于一段话 Element Plus 团队正在将原有组件内的 Font Icon 向 SVG Icon 迁移,请多多留意更新日志, ...
自定义Font Icon
前段时间在<@font-face制作Web Icon>一文收集了三种webfont通过CSS3的@font-face来制作Icon图标.现在在网上最为流行的是@robmadole和@sup ...
创建和导出SVG的技巧
我们在响应式网页设计的工作中经常用到SVG,这个过程通常包括设计阶段和开发阶段.设计阶段通常是由不懂编程的设计师们完成的.因为原生SVG作为一种图像格式和文档格式,在图形编辑器中创建SVG效果的每一步 ...
SVG关注复杂图形的网页绘制技术
SVG 是使用 XML 来描述二维图形和绘图程序的语言. 学习之前应具备的基础知识: 继续学习之前,你应该对以下内容有基本的了解: HTML XML 基础如果希望首先学习这些内容,请在本站的首页选择 ...

svg-icon使用教程

① 安装依赖

② 配置

③ 创建文件

④ 全局引入

⑤ 组件使用

svg-icon使用教程相关推荐

最新文章

热门文章