vite react 使用 svg 文件当作图标

svg 可以当做 图标 导入react 里面 ，如果用img 标签弄的话，无法控制 图标颜色 和字体 大小 ，但是把他当组件导入的话，就可以这么控制了，比较方便 ，并且也方便 webstorm 预览

首先 安装 vite-plugin-svgr

pnpm add vite-plugin-svgr -D

然后使用修改 vite.config.js

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import svgr from "vite-plugin-svgr";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [svgr(),react(),],
    server: {
        host: '0.0.0.0', // 允许局域网访问
        port: 3101
    }
})

然后随便找个svg 文件

<svg width="1em" height="1em" viewBox="0 0 78 78" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M17.7596 72.2164H12.1207V46.1017C12.1207 31.2822 24.1316 19.2628 38.9596 19.2628C53.7857 19.2628 65.7964 31.2843 65.7964 46.1017V72.2163H17.7619L17.7596 72.2164ZM40.9013 30.0801L27.6624 51.8834H38.2505L35.5997 68.2358L48.8386 46.4326H38.2505L40.9013 30.0801ZM61.2041 6.1277C61.8011 6.47564 62.2362 7.04561 62.4144 7.71321C62.5926 8.3808 62.4995 9.09179 62.1554 9.69098L57.3965 17.9655L52.8993 15.3623L57.6559 7.08762C57.8248 6.79255 58.0501 6.53364 58.3191 6.32569C58.5881 6.11773 58.8954 5.96481 59.2235 5.87566C59.5516 5.78651 59.894 5.76288 60.2312 5.80611C60.5685 5.84934 60.8939 5.95859 61.1889 6.12762H61.204L61.2041 6.1277ZM38.951 0.00012207C40.5077 0.00012207 41.766 1.172 41.766 2.62715V12.0045H36.1358V2.62059C36.1359 1.172 37.3942 0.00012207 38.951 0.00012207H38.951ZM16.7132 6.1277C17.0085 5.9568 17.3346 5.84583 17.6729 5.80115C18.0112 5.75647 18.355 5.77896 18.6846 5.86733C19.0141 5.95569 19.3231 6.10821 19.5936 6.31613C19.8642 6.52405 20.0911 6.7833 20.2613 7.07903L25.0202 15.3536L20.5229 17.9591L15.7596 9.68231C15.4159 9.08442 15.3231 8.37472 15.5014 7.70852C15.6797 7.04232 16.1146 6.47389 16.711 6.12762L16.7132 6.1277ZM0.432218 22.4801C0.601825 22.1841 0.828302 21.9244 1.09862 21.7162C1.36893 21.508 1.67775 21.3553 2.00731 21.2669C2.33686 21.1785 2.68065 21.1561 3.01888 21.201C3.35712 21.246 3.68313 21.3574 3.97816 21.5288L12.2225 26.3115L9.62792 30.8261L1.3812 26.0368C0.784247 25.6906 0.348911 25.1217 0.17059 24.4551C-0.00773142 23.7884 0.0855076 23.0782 0.429875 22.4801H0.432218ZM77.4852 22.4801C77.8293 23.0793 77.9224 23.7903 77.7441 24.4579C77.5659 25.1255 77.1308 25.6955 76.5338 26.0434L68.2916 30.8196L65.6971 26.3029L73.9393 21.5223C74.5339 21.1792 75.2403 21.0857 75.9037 21.2624C76.5671 21.4391 77.1335 21.8715 77.4787 22.465C77.4787 22.4736 77.4852 22.4736 77.4852 22.4801ZM2.92511 72.2164H75.0007C76.5575 72.2164 77.8246 73.4834 77.8246 75.0401C77.8246 76.5968 76.5575 77.8639 75.0007 77.8639H2.92519C1.36839 77.8639 0.101359 76.599 0.101359 75.0401C0.100504 74.6691 0.172961 74.3015 0.31457 73.9585C0.456179 73.6155 0.664149 73.3039 0.926537 73.0415C1.18893 72.7791 1.50056 72.5712 1.84355 72.4296C2.18654 72.288 2.55404 72.2155 2.92511 72.2164Z"
    />
</svg>

注意这里你要控制 svg颜色的话就将 他的fill 全部删除 ，然后加上自己的 fill="currentColor" 就能控制 svg 颜色啦，字体 大小也是 ，把width 和 height 都改成 1em 就能通过字体大小控制 svg 大小了

然后引用 他

import WarnIcon from "./icon/warn.svg?react";

注意这里的 ?react 一定要加！！！

组件使用
<WarnIcon />

参考 ： https://medium.com/@lisalisa12332180/使用svgr在vite-react-typescript專案中引入svg圖檔-9634c2362dc6