要闻速递:svgicon组件使用方法示例详解
目录
场景编写SvgIcon组件组件文件结构icons文件结构vue.config.js配置最终效果场景
最近在研发产品的过程中,ued切了很多svg的图片;咱们在使用过程中除了背景图再就是使用进行使用。
在你进行公共组件编写的时候,使用图片路径这种方式编写完组件发布之后;在再项目中引入已发布的组件,在你运行代码的时候图片路径会附带上当前运行的域名,导致图片显示不出来。
那么怎么解决这种问题呢?
(相关资料图)
和UED进行沟通让他们把这种svg的图片做成icon;前端自己完成svg转换icon,封装Svgicon可复用组件;减少沟通成本;提高复用率来提升研发效率。我们选择的是第二种方式使用svg-sprite-loader进行svg到icon的转换
编写SvgIcon组件
组件文件结构
src/packages/SvgIcon/index.vue
//src/packages/SvgIcon/index.vue <script> 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>
icons文件结构
src/packages/icons
src/packages/icons/svg 该文件夹放置svg文件
src/packages/icons/index.js
/**src/packages/icons/index.js**/ import Vue from "vue" import SvgIcon from "../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)
按照上面的步骤组件就编写完了,可以进行发布使用;
具体使用方法如下。
该组件还需结合使用svg-sprite-loader进行使用
www.npmjs.com/package/svg…
npm i svg-sprite-loader
vue.config.js配置
chainWebpack: (config) => { config.module.rule("svg").exclude.add(resolve("src/packages/icons")).end() config.module .rule("icons") .test(/\.svg$/) .include.add(resolve("src/packages/icons")) .end() .use("svg-sprite-loader") .loader("svg-sprite-loader") .options({ symbolId: "icon-[name]" }) .end() }
最终效果
以上就是svgicon组件使用方法示例详解的详细内容,更多关于svgicon组件方法的资料请关注脚本之家其它相关文章!
X 关闭
X 关闭
- 1亚马逊开始大规模推广掌纹支付技术 顾客可使用“挥手付”结账
- 2现代和起亚上半年出口20万辆新能源汽车同比增长30.6%
- 3如何让居民5分钟使用到各种设施?沙特“线性城市”来了
- 4AMD实现连续8个季度的增长 季度营收首次突破60亿美元利润更是翻倍
- 5转转集团发布2022年二季度手机行情报告:二手市场“飘香”
- 6充电宝100Wh等于多少毫安?铁路旅客禁止、限制携带和托运物品目录
- 7好消息!京东与腾讯续签三年战略合作协议 加强技术创新与供应链服务
- 8名创优品拟通过香港IPO全球发售4100万股 全球发售所得款项有什么用处?
- 9亚马逊云科技成立量子网络中心致力解决量子计算领域的挑战
- 10京东绿色建材线上平台上线 新增用户70%来自下沉市场