在 Web 前端开发中，图标的使用是非常重要的。很多时候，我们需要使用一些常用的图标，比如购物车、搜索等等，如果每次都自己手动绘制这些图标，那就太麻烦了。幸运的是，有许多现成的图标库可以使用，而 micro-ui-icon 就是其中之一。
什么是 micro-ui-icon
micro-ui-icon 是一个基于 SVG 的图标库，它包含了许多常用的图标，比如各种箭头、星星、购物车、搜索等等。这些图标都非常精美，而且可以完全自定义颜色和大小，方便我们在项目中直接使用。
如何使用 micro-ui-icon
使用 micro-ui-icon 非常简单。首先，我们需要通过 npm 安装它：
npm install micro-ui-icon
然后，我们就可以在代码中使用它了。比如，我们要使用一个“搜索”的图标，可以这样写：
<!-- 引入 SVG 图标库 --> <script src="./node_modules/micro-ui-icon/dist/all.min.js"></script> <!-- 使用搜索图标 --> <svg class="icon" style="width:24px;height:24px"> <use xlink:href="#mi-search"></use> </svg>
这里以搜索图标为例，将 icon 的样式修改为适当大小即可，同时使用 use 元素来引用 #mi-search，表示使用搜索图标。
注意，我们需要先引入 all.min.js，这个文件包含了所有的图标库。如果我们只需要部分图标，可以在 HTML 文件中只引入需要的符号（Symbol）：
<!-- 引入 SVG 图标库 --> <script src="./node_modules/micro-ui-icon/dist/search.min.js"></script> <!-- 使用搜索图标 --> <svg class="icon" style="width:24px;height:24px"> <use xlink:href="#mi-search"></use> </svg>
这里只引入了搜索图标所在的 search.min.js 文件，这样可以减小最终的文件大小。
自定义颜色和大小
micro-ui-icon 的另一个好处是，我们可以完全自定义图标的颜色和大小。比如，我们要将搜索图标改为蓝色，可以这样写：
<!-- 引入 SVG 图标库 --> <script src="./node_modules/micro-ui-icon/dist/search.min.js"></script> <!-- 使用搜索图标，并自定义颜色和大小 --> <svg class="icon" style="width:32px;height:32px"> <use xlink:href="#mi-search" style="fill: blue;"></use> </svg>
这里将 style 中的 fill 属性设置为蓝色，表示将图标的颜色改变为蓝色。同时，将 width 和 height 分别设置为 32px，表示将图标的大小改变为 32px。
总结
micro-ui-icon 是一个非常实用的图标库，它包含了许多常用的图标，并且可以很方便地自定义颜色和大小。使用它可以大大提高我们的开发效率，同时也可以让项目中的图标更加精美。值得一试哦！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f441d8e776d08040e9d