企业官网建设流程全解析

公司网站怎么自己做,windows2008网站,wordpress转移typecho,2022昆明今天刚刚发生的新闻文章目录1. 为什么要封装#xff1f;2. 实现步骤第一步#xff1a;资源准备1. 下载已经加入购物车的矢量图#xff08;选中Symbol#xff09;2. 把iconfont.js这个js文件放到项目中第二步#xff1a;组件实现 (IconFont/index.jsx)第三步#xff1a;样式定义 (IconFont.m…文章目录1. 为什么要封装2. 实现步骤第一步资源准备1. 下载已经加入购物车的矢量图选中Symbol2. 把iconfont.js这个js文件放到项目中第二步组件实现 (IconFont/index.jsx)第三步样式定义 (IconFont.module.scss)3. 如何使用4. 方案亮点总结虽然Ant Design等 UI 库提供了丰富的内置图标但业务场景往往需要定制化、品牌化或彩色的矢量图标。阿里矢量图标库 (Iconfont)是目前的行业标准解决方案。1. 为什么要封装直接使用createFromIconfontCN虽然能跑通但在实际项目中存在痛点依赖外网直接使用 CDN 链接 (//at.alicdn.com/...)一旦 Iconfont 服务器波动或内网环境无法访问公网图标就会挂掉。重复代码到处写Icon typeicon-xxx /难以统一管理样式如悬停变色。维护成本图标库更新时需要全项目搜索替换 URL。我们的方案通过以下方式解决这些问题本地化部署将 JS 文件下载到项目内 (src/assets)。组件封装提供统一的IconFont /接口。样式增强内置悬停交互和尺寸控制。2. 实现步骤第一步资源准备1. 下载已经加入购物车的矢量图选中Symbol如图2. 把iconfont.js这个js文件放到项目中下载的文件只需要iconfont.js其他文件不需要然后放到静态资源文件夹下:src/ assets/ iconfont/ iconfont.js -- 下载的 Symbol JS 文件第二步组件实现 (IconFont/index.jsx)我们使用ant-design/icons的createFromIconfontCN方法并加载本地脚本。注意这里使用了?url后缀Vite/Webpack 常见用法来获取文件路径字符串。import{createFromIconfontCN}fromant-design/icons;importiconUrlfrom/assets/iconfont/iconfont.js?url;// 引入本地脚本路径importstylesfrom./IconFont.module.scss;// 初始化阿里图标库原始组件constAntdIconFontcreateFromIconfontCN({scriptUrl:iconUrl,// 使用本地资源无需外网});/** * description 自定义图标组件 - 使用阿里矢量图 * param {string} type - 图标类型 (必传对应 Iconfont 网站上的标识) * param {string} className - 额外的类名 * param {boolean} hover - 是否开启悬停效果默认为 true * param {object} style - 行内样式 */constIconFont({type,className,hovertrue,...props}){// 组合样式模块化样式 悬停逻辑 自定义类名constcombinedClassName${styles.iconfont}${!hover?styles.noHover:}${className}.trim();return(AntdIconFont type{type}className{combinedClassName}{...props}/);};exportdefaultIconFont;第三步样式定义 (IconFont.module.scss)使用 CSS Modules 确保样式隔离同时加入标准化的交互效果。.iconfont{display:inline-block;color:inherit;// 默认继承父级颜色font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-0.125em;// 对齐文字基线font-size:14px;// 默认大小cursor:pointer;transition:all 0.3s;// 平滑过渡 // 默认悬停效果 :hover{color:#1890ff;// 悬停变主题色transform:scale(1.1);// 微调放大效果}// 无悬停效果状态 .noHover{cursor:default;:hover{color:inherit;transform:none;}}}3. 如何使用封装后的组件使用非常简单。1. 基础用法传入type名称从 Iconfont 网站复制的代码IconFont typeicon-home /如图2. 禁用悬停效果用于仅展示的场景如按钮内部或静态文本IconFont typeicon-userhover{false}/3. 自定义大小和颜色因为是 SVG 字体图标可以通过style或className随意控制IconFont typeicon-settingsstyle{{fontSize:24px,color:red}}/4. 方案亮点总结稳定性本地引入iconfont.js彻底消除了 CDN 不稳定的风险内网离线环境也能完美运行。体验感内置的transform: scale(1.1)和颜色过渡让用户的操作能得到即时、细腻的反馈。扩展性组件结构清晰未来如果需要切换多色图标或增加全局配置只需修改这一个文件即可。为什么要加?url?在现代构建工具如 Vite中直接 import JS 文件通常导入的是模块内容。加上?url是强制打包器返回该文件的 URL 路径这正是scriptUrl参数所需要的。Symbol 模式本方案使用的是 Symbol 引用方式SVG支持多色图标且缩放不失真优于旧版的 Font-class 方式。点击进入我的网站