跟公司产品做网站,连云港网站建设推广,深圳做营销网站公司哪家好,营销网站建设实训总结vue项目中如何使用SVG图标-CSDN博客这是上一个如何使用SVG图标#xff0c;自由的从图标库下载图标进行增删改等操作固然很方便#xff0c;但是也暴露出一些小小的不足#xff0c;那就是任意的图标使用可以造成图标风格的不统一#xff0c;从而影响整个项目的用户体验。
因…vue项目中如何使用SVG图标-CSDN博客这是上一个如何使用SVG图标自由的从图标库下载图标进行增删改等操作固然很方便但是也暴露出一些小小的不足那就是任意的图标使用可以造成图标风格的不统一从而影响整个项目的用户体验。
因为我们在进行图标下载的时候有可能是从IconFont图标网站上不同的图标项目库中进行分别的下载如何堆积在当前自己的项目中那么图标的大小色彩风格等样素可想而知也必然存在一定的差异。
那么是否有一种方式可以解决该问题。IconFont图标组件库由此而诞生了。 Icon Library图标库包含一系列标准化图标资源的库通常用于帮助设计师等开发人员快速选择和使用各种图标。iconLibrary 为什么要使用图标类库是因为它具有一些优势特点比如
提高效率图标库中已经有大量的标准化图标使设计师和开发人员可以直接使用避免了重复设计的时间浪费。统一风格使用图标库的图标可以保证图标风格的一致性提高应用的整体美观度和用户体验。节省成本使用图标库可以节省设计师和开发人员的成本减少制作自定义图标的开销。可维护性图标库中的图标通常都是标准化的易于维护和更新。可以避免因为图标变更带来的维护成本。
当然图标库也不完善也有一些不足比如
依赖外部资源需要从外部下载图标库可能会导致应用加载速度变慢。无效资源的引入图标库中包含的资源可能成百上千但项目中使用的图标只有几个几十个更多引入的图标资源被浪费占用了项目的空间影响了性能。风格受限图标库中的图标都是标准化的如果要使用非标准的图标则需要自己设计。版权问题一些图标库可能会有版权问题需要注意版权问题。可能无法满足需求虽然图标库中有大量的图标可供选择但是并不一定能满足应用的需求。
所以我们在考虑使用图标库的时候还是需要进行项目合理性考量。
那么常见的图标库有ionicons Ant Design Element Material Design Icons
Ionicons: Premium Open Source Icon Pack for Ionic Framework
Material Design Icons - Icon Library - Pictogrammers
Icon 图标 | Element Plus
图标 Icon - Ant Design
第一步安装(项目是vite环境vue3项目中)
npm i element-plus/icons-vue -S
第二步在main.ts入口文件
在该文件中将模块中其所有图标内容进行统一性加载。
并且利用for循环进行遍历将遍历出的所有图标进行全局组件的公共注册即可。
import { createApp } from vue;
import ./style.css;
import App from ./App.vue;
import * as ElementPlusIconVue from element-plus/icon-vue;
const app createApp(App);
for (const [key,component] ofObject.entries(ElementPlusIconVue)) {app.component(key,component);}
app.mount(#app);
第三步使用
可以在页面或组件中进行图标的直接调用并设置其宽高等样式
templateEdit stylewidth: 1rem /
/template
那么以上则是element-plus的应用我们根据以上内容可以对其他图标进行举一反三antd-design的图标操作也是相似的。
第一步安装npm i ant-design/icon-vue -S
npm i ant-design/icon-vue -S
第二步在main.ts入口文件
import { createApp } from vue;
import ./style.css;
import App from ./App.vue;
import * as ElementPlusIconVue from element-plus/icon-vue;
import * as AntDesignIconsValue from ant-design/icons-vue;const app createApp(App);
for (const [key,component]of Object.entries(ElementPlusIconVue)) {app.component(key,component);}for (const [key,component]of Object.entries(AntDesignIconsValue)){console.log(key);app.component(key,component);}app.mount(#app);
第三步使用
可以在页面或组件中进行图标的直接调用并设置其字体大小等样式
templateEdit stylewidth: 1rem /UserDeleteOutlined stylefont-size: 48px /
/template
至于像ionicons更为简单只需要在index.html中引入一个js脚本就可以在页面中使用ion-icon /标签进行应用
第一步引入js脚本
script typemodule srchttps://unpkg.com/ionicons5.5.2/dist/ionicons/ionicons.esm.js/script
第二步使用
templateion-iconnameheartsizelarge /
/template
需要注意不管那种图标类库如果图标库中并不存在想要使用的图标对象那么暂时是没办法进行自定义图标扩展应用的。
