vue项目引入图标,vue.js自定义组件
我们经常会在vue项目中遇到图标。下面这篇文章主要介绍如何基于Vue中自定义组件的实现方式引入图标的相关信息。文章通过示例代码非常详细的介绍，有需要的朋友可以参考一下。
前言
在项目开发中，有许多使用图标的方法。你可以在iconfont上找到合适的图标，通过http或者直接下载来使用。这里我分享一种通过实现自定义组件来引入图标的方法。
搭建环境
这里通过@vue/cli 4.5.13创建了一个新项目，为了方便我们，需要安装依赖的svg-sprite-loader来处理相应的svg图标。
安装：NPM install-save-devsvg-sprite-loader
配置vue.config.js
安装svg-sprite-loader后，创建一个新的vue.config.js来配置依赖项：
//vue.config.js
const { resolve }=require(path )
模块.导出={
chainWebpack(配置){
配置。组件。规则( svg )。排除。添加(解析( src/icons ))。结束()
配置。组件。规则(“图标”)。测试(/\。svg$/)。包括。添加(解析( src/icons ))。结束()。使用( svg-sprite-loader )。加载程序(“svg-sprite-loader”)。选项({
symboled: icon-[name]
})
}
}
这里，通过chainWebpack进行了两种配置：
第一个是让其他原来处理svg的依赖项不处理我们src/icons下的自定义图标文件。
自定义图标文件由svg-sprite-loader处理，options中的设置表示生成的svg的symbolId是图标和文件名的拼接。
新建图标组件
在组件目录中创建新的SvgIcon.vue文件：
模板
我是图标
！-aria-隐藏，以帮助残疾人阅读(设备在阅读内容时将跳过此标签，以避免混淆)-
SVG aria-hidden= true :width= size :height= size :fill= fill color
use:xlink:href= icon name rel= external no follow /use
/svg
/i
/模板
脚本语言
从“vue”导入{ PropType，toRefs }
导出默认值{
道具：{
大小：{
type: Number作为PropTypenumber，
默认值：14
},
fillColor: {
type: String作为PropTypestring，
默认值： #000
},
图标名称：{
type: String作为PropTypestring，
必填：真
}
},
设置(道具：任何){
const { size，fillColor，icon name:_ icon name }=tore fs(props)
const icon name=`# $ { _ icon name . value } ` 1
返回{
尺寸，
填充颜色，
图标名称
}
}
}
/脚本
然后，创建一个新的icons目录，并创建一个新的索引文件来挂起组件并引入svg图标：
//index.ts
从 @/components/SvgIcon.vue 导入SvgIcon
从“vue”导入{ App }
导出默认值(app: App)={
app.component(svg-icon ，SvgIcon)
}
const ctx=require.context(。/svg ，false，/\。svg$/)
const request all=(CTX:_ _ WebpackModuleApi。RequireContext)=ctx.keys()。forEach(ctx)
请求全部(ctx)
//main.ts
从“vue”导入{ createApp }
从导入应用程序。/App.vue
从 @/icons/index 导入安装图标
const app=createApp(App)
安装图标(应用程序)
app . mount(# app)
这个文档做两件事：
导出一个方法来挂载全局组件SVG-icon；
通过require.context自动引入svg目录下的图标文件
使用组件
首先我们需要在icons/svg目录下存储svg图标文件(在iconfont上找到你需要的)；
然后，您可以在其他地方使用它：
模板
img alt=Vue logo src=。/assets/logo.png
SVG-icon icon-name= icon-仪表板/svg-icon
HelloWorld msg=欢迎使用您的Vue.js TypeScript应用/
/模板
可以通过组件svg-icon的方式直接引入，然后传入icon-name。icon-name的值由图标拼接svg文件名组成。
总结
这种引入svg图标的定制方式非常方便。当您想要添加图标时，可以通过几个步骤来完成：
直接下载svg文件并放在相应目录下；
然后通过svg-icon组件进行介绍。
但是用css修改样式不太方便。
这就是这篇关于介绍基于Vue定制组件的图标的文章。有关Vue自定义图标组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。