vue 页签图标 icon 修改设置

9月前作者：人梦秋分类：Toy博客阅读(35) 违法举报

这篇具有很好参考价值的文章主要介绍了vue 页签图标 icon 修改设置。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近在写 Vue 项目时，有一个需求是替换页签的图标，不过在网上查了好久，发现没有一个是生效的

最后结合了两篇文章里的内容，才将这个需求实现，现在来记录一下

在 vue.config.js文件中添加以下代码：

vue 页签图标 icon 修改设置

pwa:{
      iconPaths:{
          favicon32:'./public/chatmind-logo.svg',
          favicon16:'./public/chatmind-logo.svg',
          appleTouchTcom:'./public/chatmind-logo.svg',
          maskIcon:'./public/chatmind-logo.svg',
          msTileImage:'./public/chatmind-logo.svg'
      }
  },

然后在 public/index.html文件中修改原 icon 代码，将 <link rel="icon" href="">替换为以下代码

vue 页签图标 icon 修改设置

<link rel="icon" type="image/svg+xml" href="./chatmind-logo.svg">
<link rel="shortcut icon" type="image/svg+xml" href="./chatmind-logo.svg">

如果图标不是 svg 格式，而是 ico 格式，将上面代码中 type="image/svg+xml"替换为 type="image/x-icon"

在修改完 vue.config.js 文件中的代码后，记得重新启动项目，并且在调试模式中将浏览器设置为“禁用缓存”，如图所示：

vue 页签图标 icon 修改设置

这样刷新完网页后，页签的图标就会更新了文章来源地址https://www.toymoban.com/news/detail-825120.html

到了这里，关于vue 页签图标 icon 修改设置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

关于vue3+版本引入element-ui使用icon问题（icon不显示问题）vue3中input里面不显示icon图标

1)、引入 2)、效果：出来了一个大图标 3)、代码 1)、引入 2)、效果： 3)、代码

2024年02月16日
浏览(54)
electron+vue3全家桶+vite项目搭建【24】设置应用图标，打包文件的图标

demo项目地址在electron中，我们可以通过electron-builder的配置文件来设置打包后的应用图标因为mac环境下的图标需要特殊格式，这里我们可以利用electron-icon-builder进行配置 1.引入相关依赖加入安装过程中卡在了 phantomjs-2.1.1-windows.zip的下载，可以直接去github上下载这里我也放一

2024年02月17日
浏览(64)
Vue Element-UI使用icon图标(第三方)--在线版

Element-ui一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，在Vue中使用是很方便的。关于引用icon（第三方），有一种不用下载项目到本地的方法， element自带的有icon，使用起来也很方便。但是美中不足的是，官方提供的图标库只是部分，在需要新的icon时，

2024年02月06日
浏览(56)
Vue 3使用 Iconify 作为图标库与图标离线加载的方法、 Icones 开源在线图标浏览库的使用

之前一直naive-ui搭配使用的是xicons，后来发现Iconify支持的图标合集更多，因此转而使用Iconify。与FontAwesome不同的是，Iconify配合Icones相当于是一个合集，Iconify提供了快捷引入图标的方式，而Icones是一个大的图标库，收集了大量MIT协议、Apache 2.0开源的图标文件。 Iconify 支持的框

2024年02月08日
浏览(44)
vue+element ui中的el-button自定义icon图标

button的icon属性自定义一个图标名称，这个自定义的图标名称会默认添加到button下i标签的class上，我们只需要设置i标签的样式就可以了 ##3. 按钮上使用自定义的icon

2024年02月05日
浏览(44)
vue3+elementPlus：前端自定义el-tree图标icon

重点：template蒙版下svg和use，然后前端遍历添加key和value，取判断放图标 HTML结构：el-tree里面包裹template（关键点）方法一：使用for循环 for循环数据，前端自定义tree图标第一种方法，后端key没有icon字段，自己添加方法二：使用map遍历直接map遍历前端自定义tree图标作者上一

2024年02月15日
浏览(46)
vue3.x结合element-plus如何使用icon图标

基于 Vue 3的Element Plus如何使用icon图标首先注意Element Plus版本：官网如图所示，基于vue3的具体如何使用：参考官网文档： 1.首先选择一种方式安装 2.然后全局注册图标在main.js或main.ts文件中引入： 3.然后就可以使用了，具体实例如下：使用方式1：输入框中使用输入框

2023年04月08日
浏览(52)
Vue 3使用 Iconify 作为图标库与图标离线加载的方法、 Icones 开源在线图标浏览库的使用_iconify 图标库

与FontAwesome不同的是，Iconify配合Icones相当于是一个合集，Iconify提供了快捷引入图标的方式，而Icones是一个大的图标库，收集了大量MIT协议、Apache 2.0开源的图标文件。 Iconify 支持的框架很多，本文以 Vue 3 作为介绍。官网地址： https://icones.js.org/ Iconify Design: All popular icon sets,

2024年04月27日
浏览(32)
【vue3+vite】使用vite-plugin-svg-icons插件显示本地svg图标

使用vite-plugin-svg-icons插件显示本地svg图标 1.安装vite-plugin-svg-icons插件 2.使用vite-plugin-svg-icons插件 2.1 在项目根目录查找vite.config.js,进行配置 2.2 vite-plugin-svg-icons插件引入在main.js中 2.3 svg图标放入对应路径~~~~~图标路径与iconDirs设置得路径一致项目中使用示例: //menu.icon是路径里面

2024年02月12日
浏览(44)
vue3 vue.config.js配置Element-plus组件和Icon图标实现按需自动引入

打包时，报警告，提示包太大会影响性能在页面直接使用，直接使用 SVG 图标，当做一般的 svg 使用 icon使用时需要用以下两种方式方式：如果用在el-button里面的icon属性上使用，用SVG方式无效，还是需要引入再使用（不知道有没有其他方式）注意：使用 :icon=\\\"Edit\\\" 则icon的大

2024年02月06日
浏览(70)