ElementUI图标少,引入阿里矢量图标

本文详细介绍了如何在阿里矢量图标平台上注册、新建项目,添加图标,以及如何在项目中引用和使用图标的过程,包括批量操作和代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原文链接:https://blog.csdn.net/u012820292/article/details/130853248

记录一下自己成功的步骤,很多是从网上找的,但是网上的写的很散,看一个成功不了,我综合了两篇文章写的。

传送门:

阿里矢量图标

1、按步骤:注册 > 登录 > 资源管理 > 我的项目

 2、新建项目

 3、项目名称随便写,但是不要写el-icon开头,因为和ElementUI内的图标重名,可能导致用不了。(虽然我以el-icon开头了,但是也成功用上)

4、填完后点击新建,回到首页,搜索想要的图标,加入购物车。

如果很多都想加入,可用以下代码批量加入,代码不会加入下一页的,可以手动翻页后再执行一遍。

var icons = document.querySelectorAll('.icon-gouwuche1');
var auto_click = function(i) {
    if (i < icons.length) {
        setTimeout(function() {
            icons.item(i).click();
            auto_click(i + 1);
        }, 600);
    }
};
auto_click(0);
 不会用?谷歌浏览器F12进开发者模式,点击Console(控制台)输入以上代码,回车键确定

 5、加完后,点击右上角的购物车,选择添加至项目

6、选择最开始创建的文件夹,确定。

7、下载到本地,解压

8、 去掉不用的其他文件,蓝色的文件可以删,不删也没影响。

 9、在项目目录下,src  >   assets  >  icon      (创建个icon文件,名字可以随意取),将上面剩余的文件全部拷到这个icon文件夹下。

10、找一下项目里面的main.js文件,引入刚才创建的icon文件夹下的iconfont.css文件。

 11、打开iconfont.css这个文件,能看到红色圈出来的图标

12、现在我们引用它,

我要引用这个,复制选中的名字, 

也就是复制el-icon-musicgeci注意前面的.和后面的:都不要复制, 我们在要引用的地方加个div标签,里面套个i标签试一下

            <div >
                <i class="iconfont el-icon-musicgeci"></i>
            </div>
 效果

虽然很小,我就不管了,教程到此结束。
————————————————

                            版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
                        

### 如何在 Vue 项目中集成并使用 ElementUI 图标组件 #### 集成 ElementUI 到 Vue 项目 为了在 Vue 项目中使用 ElementUI图标功能,首先需要确保已经成功集成了 ElementUI。以下是实现此目标的关键步骤: 通过 `import` 将必要的模块引入到项目的入口文件 `main.js` 中: ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 上述代码实现了对整个 ElementUI 库及其默认样式的全局注册[^1]。 如果使用的 Vue 版本为 3.x,则需替换为 Element Plus (ElementUI 对 Vue 3 的适配版),安装命令如下: ```bash npm install element-plus --save ``` 随后,在 `main.js` 文件中的配置稍有不同: ```javascript import { createApp } from 'vue'; import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; import App from './App.vue'; const app = createApp(App); app.use(ElementPlus).mount('#app'); ``` 这是针对 Vue 3 和 Element Plus 的初始化方式[^3]。 --- #### 使用 ElementUI 提供的内置图标 ElementUI 自带了一套矢量图标库,这些图标的名称可以通过查阅官方文档获取[^2]。要使用它们,可以借助 `<i>` 标签或者直接嵌入到支持图标的组件属性中。 ##### 方法一:单独使用 `<i>` 标签 可以直接利用 HTML 的 `<i>` 元素来展示所需图标,例如: ```html <i class="el-icon-edit"></i> <i class="el-icon-share"></i> <i class="el-icon-delete"></i> ``` 这里的类名遵循命名规则 `el-icon-{icon-name}`,其中 `{icon-name}` 是具体图标的名称[^5]。 ##### 方法二:结合按钮或其他交互组件 许多 ElementUI 组件允许指定 `icon` 属性以显示特定图标。比如按钮组件 (`<el-button>`) 可以这样设置: ```html <el-button type="primary" icon="el-icon-search">搜索</el-button> ``` 这会在按钮左侧放置一个放大镜形状的图标。 --- #### 引入自定义字体图标IconFont) 除了使用 ElementUI 默认提供的图标外,还可以扩展自己的图标集合。推荐的方式是从阿里巴巴 IconFont 平台下载所需的 SVG 字体包,并将其应用至项目中。 完成上传和选择后,生成对应的 CSS 文件路径链接地址。接着按照以下方法操作即可加载该资源: 修改 `src/assets/icon/iconfont.css` 文件内容或将远程 URL 添加进样式表里; 最后记得更新 `main.js` 来统一管理静态资源导入过程: ```javascript import './assets/icon/iconfont.css'; // 加载阿里图标字体 ``` 如此便能调用新增加的个性化图形素材了[^4]。 --- ### 总结 无论是采用原生封装好的简单快捷方案还是灵活定制化需求较高的场景下,都可以轻松达成预期效果。只需依据实际业务逻辑合理选用相应工具组合形式便可高效开发出满足视觉美观度要求的应用程序界面设计作品!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值