Remix Icon 完全上手3100 开源图标30 秒跑通第一个【免费下载链接】RemixIconOpen source neutral style icon system项目地址: https://gitcode.com/gh_mirrors/re/RemixIconRemix Icon 是一套开源图标系统中性风格3100 多个 SVG 图标外加 TTF、WOFF、WOFF2 字体文件按场景分成十几个类别个人与商用均免费。它解决的是项目里到处找图标、换一套组件库就换一次风格的问题。读完这篇你能在 30 秒内装好这个图标库并且知道字体 class、font-face、SVG 直引三种接入方式各自适合什么场景。30 秒装完先跑起来图标库安装一条命令就够。装完的包里只有两样有用的东西fonts 目录放字体文件和配套 CSSicons 目录放全部 SVG 源文件。npm install remixicon --save字体图标引入到页面只需两行引一条 CSS再写一个带 class 的 i 标签link relstylesheet hrefnode_modules/remixicon/fonts/remixicon.css i classri-home-line/i刷新后你会看到一个 24×24 的描边房子。这份 CSS 同时注册了所有图标的码点映射和 ri-lg、ri-2x 这类尺寸工具类所以后面加任何图标都只改 class 名。三种接入姿势按场景挑一个用一行 ri- class 引入 Remix Icon 字体图标只改颜色和大小class 最省事。图标名加 ri- 前缀写成 class想放大就追加 ri-2x想占满格子加 ri-fwi classri-home-line ri-2x/i i classri-settings-3-fill ri-fw/i自己写 font-face 接管 Remix Icon 的字体路径要把字体文件挪进自己的静态目录、或者只保留用到的码点时复制 font-face 自己维护。现代浏览器只留 woff2 和 ttf 两种格式font-face { font-family: remixicon; src: url(/static/remixicon.woff2) format(woff2), url(/static/remixicon.ttf) format(truetype); font-display: swap; }注意 class 到码点的映射.ri-home-line:before { content: \ee2b }仍在 remixicon.css 里这部分照抄不要自己猜码点。SVG 直引拿到完全可控的 24×24 矢量图形要做 sprite、需要精确对齐插画风格或者不想加载整包字体走 SVG。仓库里每个图标都是单 path、24×24 视口复制进来即可svg viewBox0 0 24 24 width24 height24 fillcurrentColor path dM16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z/ /svg3100 个图标怎么快速定位到你要的那一个icons/ 下按场景分目录Arrows 是 arrow-up-line、arrow-left-right-line、skip-down-fill 这类方向与导航图标Communication 是 chat-ai-line、message-fill、video-chat-line 这类聊天与消息图标。Business、Buildings、Device、Finance 等类别同理目录名基本能猜出内容。找图标时先定后缀-line 是描边款-fill 是实心款两者同名成对比如 home-line 和 home-fill。弱提示、装饰性位置用 line需要强调的选中态、主操作按钮用 fill这样整页视觉密度是统一的。不记得图标叫什么就用关键词搜。仓库里的 tags.json 给每个图标配了中英文标签官网的搜索框用的就是这份数据本地查某个主题有没有覆盖用编辑器全局搜文件名或rg -il calendar icons/一条命令也能命中打开 SVG 看一眼再决定。改色、缩放、换路径——三个高频定制动作字体类图标本质是文字颜色走 color、尺寸走 font-size各一行.ri-home-line { color: #ff6b6b; }和.ri-settings-3-fill { font-size: 24px; }SVG 图标修改直接改属性就行fill 从 currentColor 换成色值就是固定色对 path 单独设 fill 还能做出双色图标svg viewBox0 0 24 24 width24 height24 fill#10b981 path dM16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z/ /svg一个容易踩的坑字体类图标天然继承父元素的 CSS colorSVG 只有写 currentColor 才跟 color 走写了死色值就是死的。两种形态混用时别假设它们表现一致。文件速查——拿到仓库先看这两个目录fonts/字体文件与配套 CSS字体方案入口icons/按类别组织的 SVG 源文件Remix Icon 同时给你字体和 SVG 两种形态同一套 24×24 网格换场景不用换图标。去官网预览完整图标集缺图标或有建议直接提 Issue。【免费下载链接】RemixIconOpen source neutral style icon system项目地址: https://gitcode.com/gh_mirrors/re/RemixIcon创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Remix Icon 完全上手3100 开源图标30 秒跑通第一个【免费下载链接】RemixIconOpen source neutral style icon system项目地址: https://gitcode.com/gh_mirrors/re/RemixIconRemix Icon 是一套开源图标系统中性风格3100 多个 SVG 图标外加 TTF、WOFF、WOFF2 字体文件按场景分成十几个类别个人与商用均免费。它解决的是项目里到处找图标、换一套组件库就换一次风格的问题。读完这篇你能在 30 秒内装好这个图标库并且知道字体 class、font-face、SVG 直引三种接入方式各自适合什么场景。30 秒装完先跑起来图标库安装一条命令就够。装完的包里只有两样有用的东西fonts 目录放字体文件和配套 CSSicons 目录放全部 SVG 源文件。npm install remixicon --save字体图标引入到页面只需两行引一条 CSS再写一个带 class 的 i 标签link relstylesheet hrefnode_modules/remixicon/fonts/remixicon.css i classri-home-line/i刷新后你会看到一个 24×24 的描边房子。这份 CSS 同时注册了所有图标的码点映射和 ri-lg、ri-2x 这类尺寸工具类所以后面加任何图标都只改 class 名。三种接入姿势按场景挑一个用一行 ri- class 引入 Remix Icon 字体图标只改颜色和大小class 最省事。图标名加 ri- 前缀写成 class想放大就追加 ri-2x想占满格子加 ri-fwi classri-home-line ri-2x/i i classri-settings-3-fill ri-fw/i自己写 font-face 接管 Remix Icon 的字体路径要把字体文件挪进自己的静态目录、或者只保留用到的码点时复制 font-face 自己维护。现代浏览器只留 woff2 和 ttf 两种格式font-face { font-family: remixicon; src: url(/static/remixicon.woff2) format(woff2), url(/static/remixicon.ttf) format(truetype); font-display: swap; }注意 class 到码点的映射.ri-home-line:before { content: \ee2b }仍在 remixicon.css 里这部分照抄不要自己猜码点。SVG 直引拿到完全可控的 24×24 矢量图形要做 sprite、需要精确对齐插画风格或者不想加载整包字体走 SVG。仓库里每个图标都是单 path、24×24 视口复制进来即可svg viewBox0 0 24 24 width24 height24 fillcurrentColor path dM16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z/ /svg3100 个图标怎么快速定位到你要的那一个icons/ 下按场景分目录Arrows 是 arrow-up-line、arrow-left-right-line、skip-down-fill 这类方向与导航图标Communication 是 chat-ai-line、message-fill、video-chat-line 这类聊天与消息图标。Business、Buildings、Device、Finance 等类别同理目录名基本能猜出内容。找图标时先定后缀-line 是描边款-fill 是实心款两者同名成对比如 home-line 和 home-fill。弱提示、装饰性位置用 line需要强调的选中态、主操作按钮用 fill这样整页视觉密度是统一的。不记得图标叫什么就用关键词搜。仓库里的 tags.json 给每个图标配了中英文标签官网的搜索框用的就是这份数据本地查某个主题有没有覆盖用编辑器全局搜文件名或rg -il calendar icons/一条命令也能命中打开 SVG 看一眼再决定。改色、缩放、换路径——三个高频定制动作字体类图标本质是文字颜色走 color、尺寸走 font-size各一行.ri-home-line { color: #ff6b6b; }和.ri-settings-3-fill { font-size: 24px; }SVG 图标修改直接改属性就行fill 从 currentColor 换成色值就是固定色对 path 单独设 fill 还能做出双色图标svg viewBox0 0 24 24 width24 height24 fill#10b981 path dM16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z/ /svg一个容易踩的坑字体类图标天然继承父元素的 CSS colorSVG 只有写 currentColor 才跟 color 走写了死色值就是死的。两种形态混用时别假设它们表现一致。文件速查——拿到仓库先看这两个目录fonts/字体文件与配套 CSS字体方案入口icons/按类别组织的 SVG 源文件Remix Icon 同时给你字体和 SVG 两种形态同一套 24×24 网格换场景不用换图标。去官网预览完整图标集缺图标或有建议直接提 Issue。【免费下载链接】RemixIconOpen source neutral style icon system项目地址: https://gitcode.com/gh_mirrors/re/RemixIcon创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
