浙江省建设厅网站如何查安全员,深圳市住房和建设局官方网站查阅,wordpress教育,网络系统规划与部署前言
项目中有大量svg图片#xff0c;为了方便引入#xff0c;所以对svg进行了处理
一、svg是什么#xff1f;
svg是可缩放矢量图形#xff0c;是一种图片格式
二、使用步骤
1.创建icons文件夹
将icons文件夹放进src中#xff0c;并创建一个svg文件夹和index.js为了方便引入所以对svg进行了处理
一、svg是什么
svg是可缩放矢量图形是一种图片格式
二、使用步骤
1.创建icons文件夹
将icons文件夹放进src中并创建一个svg文件夹和index.jsSvgIcon.vue以及svgo.yml
2.封装svg-icon(SvgIcon.vue)
templatediv v-ifisExternal :stylestyleExternalIcon classsvg-external-icon svg-icon v-on$listeners /svg v-else :classsvgClass aria-hiddentrue v-on$listenersuse :xlink:hreficonName //svg/templatescript// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usageimport { isExternal } from /utils/validateexport 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%}}}}/scriptstyle 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
3.校验传入的iconClass是否为外部链接
若src文件夹下有utils则直接创建validate.js没有则创建utils文件夹和validate.js
/**校验传入的iconClass是否为外部链接* param {string} path* returns {Boolean}*/export function isExternal(path) {return /^(https?:|mailto:|tel:)/.test(path)}
4.全局安装下载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)
svgo.yml
# replace default config# multipass: true
# full: trueplugins:# - name## or:# - name: false# - name: true## or:# - name:# param1: 1# param2: 2- removeAttrs:attrs:- fill- fill-rulemain.js
import /icons/index 5.下载插件批量处理svg图片
npm install svg-sprite-loader
npm install svgo-loader
我下载的版本是 6.vue.config.js配置插件
const path require(path)
module.exports {chainWebpack: (config) {let args config.resolve.alias.set(, resolve(src)).set(assets, resolve(src/assets)).set(views, resolve(src/views)).set(components, resolve(src/components)).set(images, resolve(src/assets/images)).set(utils, resolve(src/utils))config.module.rule(svg).exclude.add(path.join(__dirname, src/icons/svg)).end()config.module.rule(icons).test(/\.svg$/).include.add(path.join(__dirname, src/icons/svg)).end().use(svg-sprite).loader(svg-sprite-loader).options({symbolId: icon-[name],svgo: {plugins: [{removeViewBox: false}]}}).end().use(svgo-loader).loader(svgo-loader).options({plugins: [{name: removeAttrs, // 必须指定nameparams: {attrs: fill}}]}).end()}
} 7.使用svg
将svg图片引入svg文件夹中并修改名字然后使用以下代码方可使用
//home是svg图片在svg文件夹中的名字color是svg图片的颜色svg-icon icon-classhome color#fff /
总结 以上内容皆是我总结网上查询到的以及根据自身项目所得出的经验可供参考。
