php做网站优势,引擎搜索下载,广州公司电商网站建设,网站建设7个基本流程项目中为了体验好、性能优、资源丰富等原因经常会用svg这种矢量图#xff0c;但是svg不能直接像image标签一样直接使用#xff0c;这就需要前端的同学自己处理了。 svg有以下优点#xff1a;
svg放大不失真,png#xff0c;jpg会出现失真现象svg的体积非常小#xff0c;对…项目中为了体验好、性能优、资源丰富等原因经常会用svg这种矢量图但是svg不能直接像image标签一样直接使用这就需要前端的同学自己处理了。 svg有以下优点
svg放大不失真,pngjpg会出现失真现象svg的体积非常小对有大量图标图片的页面体验友好图像文件可读易于修改和编辑svg文件还可嵌入JavaScript脚本来控制svg对象
那这么好的东西怎么在前端vue项目中使用呢 下面就来个最佳实践
1.安装svg-sprite-loader npm install svg-sprite-loader2、webpack 配置vue.config.js
chainWebpack: config {// 别名设置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/assets/icons/svg)).end()config.module.rule(icons).test(/\.svg$/).include.add(path.join(__dirname, src/assets/icons/svg)).end().use(svg-sprite).loader(svg-sprite-loader).options({symbolId: icon-[name],svgo: {plugins: [{removeViewBox: false}]}}).end()},注意这里的chainWebpack对象是跟devServer是平级的对象 3、创建、注册和导出svg的组件
创建svg组件这里我直接在view下面的目录创建了svg组件文件夹当然你可以选在在common或者components下 代码为
templatei v-ificonFileName.indexOf(el-icon-) 0 :classiconFileName /svg v-else classsvg-icon aria-hiddentrue v-on$listenersuse :xlink:href#icon-${iconFileName} //svg
/templatescript
export default {name: SvgIcon,props: {iconFileName: {type: String,required: true}}
}
/scriptstyle scoped
.svg-icon {width: 14px;height: 14px;overflow: hidden;/* vertical-align: -0.15em; */fill: currentColor;
}
/style
注册svg组件 具体代码如下
import Vue from vue
import SvgIcon from /svgIcon
Vue.component(svg-icon, SvgIcon)const req require.context(/assets/icons/svg, false, /\.svg$/)
const requireAll requireContext {// requireContext.keys()数据svg文件夹下面的requireContext.keys().map(requireContext)
}
requireAll(req)4、main.js
//引入整个icons,
import ./assets/icons/index当然你你也可以在main中引入并注册svg组件我是为了方便维护把功能抽到了icon文件下面了
5、组件中使用 svg-icon classimage icon-file-nameheart/svg-icon组件属性的icon-file-name的值就是svg文件的名字。
好的就可以方便的使用svg了
