单页网站开发,丽江建网站,网站的风格主要包括,centos7网站开发如何封装svg图标组件 封装svg图标组件的方法有很多种#xff0c;如果只是单纯的想使用svg图标#xff0c;可以将svg导出fonts字体图标使用#xff0c;但这样做会失去svg原有的样式与尺寸#xff0c;也可以当成img图片或者背景引入#xff0c;但这样做非常繁琐。 最近项目中…如何封装svg图标组件 封装svg图标组件的方法有很多种如果只是单纯的想使用svg图标可以将svg导出fonts字体图标使用但这样做会失去svg原有的样式与尺寸也可以当成img图片或者背景引入但这样做非常繁琐。 最近项目中需要用大量的svg图标这里介绍一种通过vue组件使用svg图标的方式 首先了解一下svg图标的use元素。 svgdefsg idshaperect x0 y0 width50 height50 /circle cx0 cy0 r50 //g/defsuse xlink:href#shape x50 y50 /use xlink:href#shape x200 y50 /
/svg
复制代码比如我绘制了一个id为shape的svg元素当我想复用时不可能再复制粘贴一遍代码这时借助use元素让xlink:href指定为#shape它会去寻找并克隆对应的svg元素从而实现复用。 use元素方便的是只要同处于一个文档中use都可以引用到它可以重用单个元素也可以重用一组g或者symbol元素只需要通过id选择器进行标时引用即可。 具体的想要了解use克隆的内容放在了哪里以及svg更底层的内容可参考用CSS给SVG 的内容添加样式 封装vue组件 首先将UI提供的需要使用的svg文件统一放在一个文件夹内 ├── src├── svg├── user.svg└── course.svg
复制代码开发vue组件 // svg-icon.vue
templatesvg :classsvgClass aria-hiddentrue v-on$listenersuse :xlink:hreficonName/use/svg
/templatescript
import ./icons;export default {name: SvgIcon,props: {// svg图标名称name: {default: },// 自定义样式className: {type: String,default: }},computed: {iconName() {return #icon-${this.name};},svgClass() {return [svg-icon,this.className ? this.className:]}}
};
/scriptstyle scoped
.svg-icon {vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
/style
复制代码我们期望使用svg-icon组件来统一使用所有的svg文件通过指定name来变更对应的svg文件。 想要使用svg文件的话还需要将所有svg文件统一加载到内存当中可以使用import svg/user.svg这种方式一个一个引用这里借助require.context一次性引入所有svg文件。 // icons.jsconst req require.context(svg, false, /\.svg$/);
const requireAll requireContext requireContext.keys().map(requireContext);
requireAll(req);
复制代码这个时候还不能通过svg-icon组件指定name的方式来引用兑用svg文件。我们还需要将每个svg文件进一步处理将他们文件内容的icon封装进symbol元素中达到下面的使用效果 svg xmlnshttp://www.w3.org/2000/svg xmlns:xlinkhttp://www.w3.org/1999/xlinksymbol classicon viewBox0 0 970 740 idicon-user.../symbol
/svg
复制代码这里可以借助webpack插件svg-sprite-loader 改造项目的webpack配置 由于项目是基于vue-cli3定制的所以这里只介绍一下如何在vue-cli3中配置svg-sprite-loader。 代码如下 module.exports {...chainWebpack: config {...config.module.rule(svg).exclude.add(resolve(src/svg)).end();config.module.rule(svgs-loader).test(/\.svg$/).include.add(resolve(src/svg)).end().use(svg-sprite-loader).loader(svg-sprite-loader).options({symbolId: icon-[name]}).end();}
}
复制代码这里要注意一下配置svg-sprite-loader之前要先替换vue-cli3本身的file-loader规则该loader会把svg同图片资源一样单独输出出来这里配置file-loader忽略svg下面所有的svg文件即可。 最后在vue中就可以通过svg-icon组件来使用对应的svg图标了。 相关文章 未来必热SVG Sprite技术介绍用CSS给SVG 的内容添加样式 如文章内容出现错误敬请谅解希望可以不吝赐教。 转载请注明出处 转载于:https://juejin.im/post/5cf79b8c518825382565ba19
