ant-design-icons/icons-react:可以将 svg 定义描述转换为 React 组件; ant-design/Icon:负责整合 icons 和 icons-react,将 icons 导出的所有 svg 定义描述导入 icons-react,并对外提供 Icon 接口; ant-design-palettes:调色盘,能根据主色生成与之匹配的辅色(用于 twotone 型图标); 下面重点分析 icons、icons-...
a. 画笔:一致的笔画权重是保持整个图标系统视觉统一的关键,Ant Design 系统图标的线条统一为 72px 宽度。 b. 边角:一致的角度半径也是保持整个图标系统视觉统一的重要元素。Ant Design 的图标设计中,外轮廓线统一半径为 72px 的圆角,icon 内部空间的边角保持直角,笔画的终端为圆角。 c. 视觉修正:在一些特殊情况下...
对于此,Ant Design 用最简单的物理性思维,给出了一个好记又好用的解决方案: 区分标准:如果在一个区域内的颜色上放置了前景内容(包括文字和 icon 等),这块颜色就命名为背景色(background color);如果颜色上没有放置前景内容,这块颜色就命名为填充色(fill color) 填充颜色: system Fill:纤细和小形状填充 secondar...
Icon图标 语义化的矢量图形。使用图标组件,你需要安装 @ant-design/icons 图标组件包: npm install --save @ant-design/icons 设计师专属# 安装Kitchen Sketch 插件 💎,就可以一键拖拽使用 Ant Design 和 Iconfont 的海量图标,还可以关联自有项目。 图标列表# 线框风格 实底风格 双色风格 方向性图标 Step...
通过@ant-design/icons-vue 引用Icon 组件,不同主题的 Icon 组件名为图标名加主题做为后缀,也可以通过设置 spin 属性来实现动画旋转效果。 TS 自定义图标 利用Icon 组件封装一个可复用的自定义图标。可以通过 component 属性或插槽传入一个 svg 组件来渲染最终的图标,以满足特定的需求。 TS 多色图标 双色图标可...
antdesign自定义icon svg ant design动态切换主题 实现原理 动态切换主题的功能是,通过ConfigProvider全局化配置,设置统一的样式前缀,具体ConfigProvider相关文档可以看这里:https://ant-design.gitee.io/components/config-provider-cn/#API。 举个例子,antd按钮控件,参数type设置为’primary’后,实际渲染出来后,会添加...
icon: { type: String, default: '' }, disabled: { type: Boolean, default: false }, permission: { type: [String, Boolean], default: true } }, setup (props) { const customClass = ref('c-button-primary') const customType = ref('') ...
其实图标在ant-design-vue中其实已经有很多可选的,可有些情况,产品/UI可能还是会要求使用特定的图标。这可能需要上传svg到iconfont.cn阿里图标库中,本文不讲述如何上传svg到iconfont。而是介绍如何使用iconfont中的图标,昨天花了两个小时没找到关于vue如何自定义图标的文章, 大多数都是关于react自定义图标。 所以花了...
一、去除Antd的Button组件两个汉字中间的空格 二、去掉input聚焦时的蓝色边框 三、去掉点击button时的动画 四、替换搜索框的icon 五、修改树形控件选中项的背景色 六、解决react里input输入时显示[object Object]七、ant design的气泡卡片组件Popover的弹窗里设置输入框 从content属性入手，content属性值设置...
Ant Design 设计规范和技术上支持灵活的样式定制,以满足业务和品牌上多样化的视觉需求,包括但不限于全局样式(主色、圆角、边框)和指定组件的视觉定制。 在5.0 版本的 Ant Design 中,我们提供了一套全新的定制主题方案。不同于 4.x 版本的 less 和 CSS 变量,有了 CSS-in-JS 的加持后,动态主题的能力也得到了...