怎样更改组件库的图标？

发表于 | 分类于 |

想必很多前端现在都是用别人的组件库，ant-design、element-ui或者vant等，那么当组件上的icon和我们美丽动人的UI小姐姐画出的UI稿不一样的时候，你们会怎么做呢？

组件api替换大法

1、组件本身提供api给你更换icon，换之则可
2、但每次使用都要替换也是挺麻烦的，可以尝试先封装一下，使用高阶组件

可行性高，操作容易、略麻烦

源码copy大法

1、不使用传统的npm install的包安装方法
2、将组件库的源码copy下来单独一个文件
3、修改源码组件对应的图标
4、或者自己建立一个私有的npm库将整个组件库推上去

1、一次操作到位
2、但是组件库版本滞后

webpack修改大法

以ant-design为例子

webpack上的resolve路径

1
2
3
4
5
6
7
8
9
10
11
resolve: {
  extensions: ['.ts', '.tsx', '.js', '.jsx', '.less', '.css', '.json'],
  alias: {
    '@src': path.resolve(__dirname, '../', './src'),
    '@package': path.resolve(__dirname, '../', 'src', 'package'),
    '@libs': path.resolve(__dirname, '../', 'src', 'libs'),
    '@assets': path.resolve(__dirname, '../', 'src', 'assets'),
    '@ant-design/icons/lib/dist$': path.resolve(__dirname, '../', 'src', 'icon.js'),
    'vue': 'vue/dist/vue.esm.js',
  }
}

主要就是改变这个打包路径 ‘@ant-design/icons/lib/dist$’

icon.js的文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

export {
  default as CloseOutline
} from '@libs/components/icons/CloseOutline'
export {
  default as CheckOutline
} from '@ant-design/icons/lib/outline/CheckOutline'
export {
  default as LoadingOutline
} from '@ant-design/icons/lib/outline/LoadingOutline'
export {
  default as CheckCircleOutline
} from '@ant-design/icons/lib/outline/CheckCircleOutline'
export {
  default as InfoCircleOutline
} from '@ant-design/icons/lib/outline/InfoCircleOutline'
export {
  default as CloseCircleOutline
} from '@ant-design/icons/lib/outline/CloseCircleOutline'
export {
  default as ExclamationCircleOutline
} from '@ant-design/icons/lib/outline/ExclamationCircleOutline'
export {
  default as CheckCircleFill
} from '@ant-design/icons/lib/fill/CheckCircleFill'
export {
  default as InfoCircleFill
} from '@ant-design/icons/lib/fill/InfoCircleFill'
export {
  default as CloseCircleFill
} from '@ant-design/icons/lib/fill/CloseCircleFill'
export {
  default as ExclamationCircleFill
} from '@ant-design/icons/lib/fill/ExclamationCircleFill'
export { default as UpOutline } from '@ant-design/icons/lib/outline/UpOutline'
export {
  default as DownOutline
} from '@ant-design/icons/lib/outline/DownOutline'
export {
  default as LeftOutline
} from '@ant-design/icons/lib/outline/LeftOutline'
export {
  default as RightOutline
} from '@ant-design/icons/lib/outline/RightOutline'
export {
  default as RedoOutline
} from '@ant-design/icons/lib/outline/RedoOutline'
export {
  default as CalendarOutline
} from '@ant-design/icons/lib/outline/CalendarOutline'
export {
  default as SearchOutline
} from '@ant-design/icons/lib/outline/SearchOutline'
export {
  default as BarsOutline
} from '@ant-design/icons/lib/outline/BarsOutline'
export {
  default as StarFill
} from '@ant-design/icons/lib/fill/StarFill'
export {
  default as FilterOutline
} from '@ant-design/icons/lib/outline/FilterOutline'
export {
  default as CaretUpFill
} from '@ant-design/icons/lib/fill/CaretUpFill'
export {
  default as CaretDownFill
} from '@ant-design/icons/lib/fill/CaretDownFill'
export {
  default as CaretUpOutline
} from '@ant-design/icons/lib/outline/CaretUpOutline'
export {
  default as CaretDownOutline
} from '@ant-design/icons/lib/outline/CaretDownOutline'
export {
  default as PlusOutline
} from '@ant-design/icons/lib/outline/PlusOutline'
export {
  default as FileOutline
} from '@ant-design/icons/lib/outline/FileOutline'
export {
  default as FolderOpenOutline
} from '@ant-design/icons/lib/outline/FolderOpenOutline'
export {
  default as FolderOutline
} from '@ant-design/icons/lib/outline/FolderOutline'
export {
  default as PaperClipOutline
} from '@ant-design/icons/lib/outline/PaperClipOutline'
export {
  default as PictureOutline
} from '@ant-design/icons/lib/outline/PictureOutline'
export {
  default as EyeOutline
} from '@ant-design/icons/lib/outline/EyeOutline'
export {
  default as DeleteOutline
} from '@ant-design/icons/lib/outline/DeleteOutline'

就是将你需要更改的图标的地址改为你本地的
而且这里可以只引入一些你需要的图标，会减少一些icon库的打包大小

本地的图标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
"use strict"
Object.defineProperty(exports, "__esModule", { value: true })
var CloseOutline = {
  name: 'close',
  theme: 'outline',
  icon: {
    tag: 'svg',
    attrs: { version: '1.0', viewBox: '0 0 16 16', focusable: false },
    children: [
      {
        tag: 'path',
        attrs: {
          'fill-rule': 'evenodd',
          d: 'M10.17 7.72l5.63-5.67a.63.63 0 000-.9l-.86-.91a.63.63 0 00-.91 0L8.35 5.9a.42.42 0 01-.61 0L2.06.2a.63.63 0 00-.91 0l-.91.9a.63.63 0 000 .91l5.68 5.67c.17.17.17.43 0 .6L.2 13.98a.63.63 0 000 .92l.9.9c.27.26.66.26.92 0l5.68-5.66a.42.42 0 01.6 0l5.68 5.67c.26.25.65.25.91 0l.91-.91a.63.63 0 000-.91l-5.63-5.67a.42.42 0 010-.6'
        }
      }
    ]
  }
}
exports.default = CloseOutline

使用ant-design-icons的库做转换
https://github.com/ant-design/ant-design-icons

总结

各有利弊,欢迎补充

XiuerOld wechat
今天扫码，有机会分配一位小哥哥，在线教前端。
请不要给我打赏！