在实际工作时有一个需求是导入多个svg转成字体图标，然后进行动态改色
由于导入时，svg带有颜色，生成的icon有默认颜色，
解决的方案就是提高css的权重，但是多人开发时可能会导致其他人不清楚这个方案，所以在导出的时候进行转换，把每一行的color删除了再转成json粘贴到css文件里面
然后我向gpt进行提问生成html文件，可以部署到本地上，要用的时候就直接输入就行
gpt4的答案很准确，3.5的答案有点不准，需要多次提问，输出的html稍微进行样式调整就行
实现的效果
html全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Style Converter</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="col-6 input">
<h4>Input CSS</h4>
<textarea
id="input-css"
class="form-control"
rows="30"
placeholder="Paste your CSS here..."
></textarea>
</div>
<div class="col-6 output">
<h4>
Output CSS
<button id="copy-button" class="btn btn-primary mt-2">
Copy to Clipboard
</button>
</h4>
<textarea
id="output-css"
class="form-control"
rows="30"
readonly
></textarea>
</div>
</div>
<style>
.wrapper {
display: flex;
gap: 2rem;
}
.col-6 {
width: 100vw;
}
.form-control {
font-size: 1.2rem;
width: 100%;
}
h4 {
margin-bottom: 1rem;
}
</style>
<!-- Custom JS -->
<script>
$(document).ready(function () {
$('#input-css').on('input', function () {
const inputCSS = $(this).val()
const outputCSS = inputCSS.replace(/color:.+;/g, '')
$('#output-css').val(outputCSS)
})
$('#copy-button').on('click', function () {
const outputCSS = $('#output-css')
outputCSS.select()
document.execCommand('copy')
alert('Output CSS copied to clipboard!')
})
})
</script>
</body>
</html>
总结一下：
ai的发展很快，合理利用变成生产效率工具
各位大佬有更加好的实现方式？
