什么是 made-with-x
made-with-x 是一个用来展示你的作品使用了什么技术的库，它提供了一系列的徽章图标来展示你使用的技术，并支持定制化展示方式。
安装
使用 npm 安装：
npm install made-with-x
或者使用 yarn 安装：
yarn add made-with-x
运行
made-with-x 提供了一个 MadeWith 组件，你可以直接在你的项目中使用它来展示你的技术使用情况。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- --------------
----- --- - -- -- -
------ -
---------
--------
-
----- --------
------ ------------------------------------------
--
-
----- ----------
------ --------------------------------------------
--
-
----- --------
------ ------------------------------------------
--
--
------------------------
-------------------
-------------
--
--
--使用 items 属性来传递你的技术列表，每个技术都需要传递 name 属性和 image 属性。stylePreset 属性用来选择预设的展示样式，presetColor 属性用来设置展示样式的预设颜色，fontSize 属性用来设置文本大小。
你也可以在 style 属性中传递你的自定义样式来展示你想要的效果。
定制化
要定制化展示方式，你需要自定义样式来覆盖默认样式。
MadeWith 提供了以下 CSS 变量来帮助你定制化：
--MwIconMargin: 徽章图标之间的间隔，默认值为 8px。--MwTextColor: 文本颜色，默认值为黑色。--MwTextBackground: 文本背景颜色，默认值为白色。--MwTextBorderRadius: 文本背景圆角半径，默认值为 2px。--MwIconBackground: 徽章图标背景颜色，默认值为透明。--MwIconBorder: 徽章图标边框，默认值为无。
你可以在全局 CSS 文件中定义这些变量，也可以在单个组件的 style 属性中定义。
示例
以下是一些常用的样式示例：
默认样式
-- -------------------- ---- -------
---------
--------
-
----- --------
------ ------------------------------------------
--
-
----- ----------
------ --------------------------------------------
--
-
----- --------
------ ------------------------------------------
--
--
--logo-small 样式
-- -------------------- ---- -------
---------
--------
-
----- --------
------ ------------------------------------------
--
-
----- ----------
------ --------------------------------------------
--
-
----- --------
------ ------------------------------------------
--
--
------------------------
-------------------
-------------
--logo-medium 样式
-- -------------------- ---- -------
---------
--------
-
----- --------
------ ------------------------------------------
--
-
----- ----------
------ --------------------------------------------
--
-
----- --------
------ ------------------------------------------
--
--
-------------------------
------------------
-------------
--logo-large 样式
-- -------------------- ---- -------
---------
--------
-
----- --------
------ ------------------------------------------
--
-
----- ----------
------ --------------------------------------------
--
-
----- --------
------ ------------------------------------------
--
--
------------------------
-----------------
-------------
--总结
通过 made-with-x，我们可以方便地展示我们的技术使用情况，并支持定制化展示样式。它可以在我们的开源项目中方便地使用，也可以在我们的博客或简历中展示我们的技术栈。希望这篇文章能对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600563d281e8991b448e12a3