vue自带icon图标,vue iconfont 组件
这篇文章介绍了vue。j通过组件处理图标图标的方法，文中通过示例代码介绍的非常详细。对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Icon图标处理方案
记录一次对于想使用元素加之外的图标，如何封装成一个组件，是本次记录的目标，希望在工作时能帮助自己处理图标问题。
分析，对于元素加的图标可以通过埃尔图标来进行显示，而自定义图标需要自定义一个图标组件，用来显示自定义挽救(保存的简写)图标。
组件能力
显示外部挽救(保存的简写)图标（外链)
显示项目内的挽救(保存的简写)图标
图标组件封装思路
用于展示的图标组件
创建components/SvgIcon/index.vue:
模板
差异
v-if=isExternal
:style=styleExternalIcon
class= SVG-external-icon SVG-icon
字体名称
/
SVG v-else class=" SVG-icon :aria-hidden= true
使用：xlink:href= icon name rel= external no follow /
/svg
/模板
脚本设置
从" @/utils/validate "导入{ isExternal as external }
从“vue”导入{ defineProps，computed }
const props=defineProps({
//图标图标
图标：{
类型：字符串，
必填：真
},
//图标类名
类名：{
类型：字符串，
默认值：""
}
})
/**
* 判断是否为外部图标
*/
const is external=computed(()=external(props。图标))
/**
* 外部图标样式
*/
const styleExternalIcon=computed(()=({
掩码：` url(${props.icon})否-重复50% 50% `,
-WebKit-mask :` URL($ { props。icon })否-重复50% 50%
}))
/**
* 项目内图标
*/
const icon name=computed(()=` # icon-$ { props。图标} `)
/脚本
样式lang=scss 范围。SVG-图标{
宽度：1em
身高：1em
垂直对齐：-0.15 em；
填充：当前颜色
溢出：隐藏；
}。SVG-外部-图标{
背景色：当前颜色
面具-尺寸：覆盖！重要；
显示：内嵌-块；
}
/风格
判断资源是否是外部资源
创建utils/validate.js:
/**
* 判断是否为外部资源
*/
导出函数是外部（路径){
返回/^(https？mailto:tel:)/.测试（路径)
}
外部svg图标显示
通过引入组件SVG-图标，图标传递图标外链。
span class=svg-container
SVG-icon icon= https://XXX。SVG /SVG-icon
/span
处理项目内svg图标
项目内科学研究委员会目录下创建核标准情报中心文件夹，并导入挽救(保存的简写)图标文件
在核标准情报中心下创建索引。射流研究…文件
文件完成两件事
导入所有的挽救(保存的简写)图标
完成SvgIcon的全局注册
索引。射流研究…代码如下
参考文档依赖管理网络包中文文档
从" @/组件/SvgIcon "导入SvgIcon
//通过require.context()函数来创建自己的语境
const SVG require=要求。上下文(./svg ，false，/\ .svg$/)
//此时返回一个需要的函数，可以接受一个请求的参数，用于需要的导入。
//该函数提供了三个属性，可以通过require.keys()获取到所有的挽救(保存的简写)图标
//遍历图标，把图标作为请求传入到需要导入函数中，完成本地挽救(保存的简写)图标的导入
svgRequire.keys().forEach(svgIcon=SVG require(svgIcon))
导出默认应用程序={
app.component(svg-icon ，SvgIcon)
}
全局注册项目内图标
主页。射流研究…中引入该文件
.
//导入svgIcon
从@/icons 导入安装图标
.
安装图标（应用程序)
.
使用内部图标
//用户名
svg-icon icon=user /
//密码
svg-icon icon=password /
使用svg-sprite-loader处理挽救(保存的简写)图标
svg-sprite-loader是工具中专门处理挽救(保存的简写)图标的一个装货设备
安装：NPM I-save-dev SVG-sprite-loader @ 6。0 .9
在vue。配置。射流研究…文件中配置装货设备
const path=require(path )
函数解析（目录){
返回path.join(__dirname，dir)
}
模块。导出={
chainWebpack(配置){
//设置svg-sprite-loader
配置模块。规则( svg )。exclude.add(resolve(src/icons ))。结束()
配置模块。规则("图标")。测试(/\。svg$/)。include.add(resolve(src/icons ))。结束()。使用( svg-sprite-loader )。加载程序(“svg-sprite-loader”)。选项({
符号：“图标-[名称]”
})。结束()
}
}
这样即可处理内部的挽救(保存的简写)图标啦。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。