SVG转Iconfont

LLQ
761 阅读4分钟

在线工具:

icomoon SVG Icon Libraries and Custom Icon Font Organizer ❍ IcoMoon

推荐理由： 1.上传svg转iconfont，可以生成svg或iconfont 2.可以上传项目图标配置 3.缓存到浏览器的indexDB，不上传服务器

fontello Fontello - icon fonts generator

fontastic Fontastic

注意事项：

  1. 版权问题:

    • 确保你有权使用你上传的 SVG 图标。有些图标可能受到版权保护，你需要确认你是否有权将其转换为字体并用于你的项目中。

  2. SVG 文件准备:

    • 确保 SVG 文件是干净且优化过的。删除不必要的元数据，使用一致的颜色模式（通常建议使用黑色），并且确保没有多余的路径或元素。

  3. 图标命名:

    • 给每个图标起一个有意义的名字。这将帮助你在生成的 CSS 类名中识别它们。例如，一个房子图标可以命名为 home，这样在 CSS 中它的类名可能是 .icon-home。

  4. 图标大小一致性:

    • 尽量保持所有图标的大小一致。虽然图标字体可以通过 CSS 放大或缩小，但保持原始大小的一致性有助于确保所有图标在不同的设备上看起来都很好。

  5. 选择合适的图标:

    • 仔细挑选你需要的图标。在线工具通常会生成整个图标集合，但你可能只需要其中的一部分。删除不需要的图标可以减小最终字体文件的大小。

  6. 预览与测试:

    • 在生成字体之前，使用在线工具提供的预览功能检查每一个图标。确保它们在转换过程中没有丢失细节或形状。

  7. 生成选项:

    • 大多数在线工具提供了多种生成选项，比如字体名称、CSS 框架兼容性等。根据你的项目需求选择合适的选项。

  8. 字体文件格式:

    • 确保下载所有必要的字体文件格式（如 .woff, .woff2, .ttf, .eot, .svg），以便在不同的浏览器和设备上都能正常显示。

  9. CSS 样式:

    • 检查生成的 CSS 文件是否符合你的样式需求。有时你可能需要修改默认的 CSS 规则来适应你的设计。

  10. 图标字体的使用:

    • 在项目中使用图标字体时，确保正确设置了字体大小、颜色等属性。图标字体的行为类似于普通文字，因此可以通过 CSS 完全控制它们的外观。

  11. 浏览器兼容性:

    • 测试图标字体在不同浏览器中的表现，确保它们在所有主流浏览器中都可以正常工作。

  12. 版本控制:

    • 如果你使用版本控制系统（如 Git），记得将生成的字体文件和 CSS 文件添加到版本控制中，这样你可以追踪这些文件的变化历史。

插件：

icon-font-generator

fontello-cli

icomoon

自己实现：

  1. 读取SVG文件：使用Node.js来读取本地的SVG文件。
  2. 解析SVG：使用SVG解析库（如svgo或@svgdotjs/svg.js）来解析SVG文件并获取图标信息。
  3. 生成字形：将SVG图标转换为字形，这一步通常需要借助于字体生成工具（如fontforge或glyphr-cli）。
  4. 生成字体文件：将字形信息打包进字体文件中。
  5. 生成CSS文件：根据生成的字体文件，编写CSS规则，使得图标可以通过类名来引用。
  6. 打包输出：将生成的字体文件和CSS文件输出到指定目录。

假设我们使用Node.js环境来编写这个插件，以下是各个步骤的伪代码示例：

  1. 读取SVG文件
const fs = require('fs');
const path = require('path');
// 假设有一个目录，其中包含了多个SVG文件
const svgDirectory = 'path/to/svg/icons';
// 读取目录下的所有SVG文件
function readSVGs(directory) {
    return fs.readdirSync(directory)
        .filter(file => file.endsWith('.svg'))
        .map(file => fs.readFileSync(path.join(directory, file), 'utf8'));
}
const svgFiles = readSVGs(svgDirectory);
console.log(svgFiles); // 输出SVG文件内容
  1. 解析SVG
const svgo = require('svgo'); // 假设使用svgo库来优化SVG
const svgParser = new svgo();
// 解析SVG文件
async function parseSVGs(sources) {
   const parsedSVGs = await Promise.all(
        sources.map(async source => {
            const result = await svgParser.optimize(source);
            return result.data; // 返回优化后的SVG字符串
        })
    );
    return parsedSVGs;
}
const parsedSVGs = await parseSVGs(svgFiles);
console.log(parsedSVGs); // 输出优化后的SVG字符串
  1. 生成字形和字体文件
const { Glyphr } = require('glyphr-server'); // 假设使用glyphr-server库生成字体
// 生成字体
async function generateFont(glyphs) {
    const glyphr = new Glyphr({
        // 配置项
        fontName: 'MyIconFont',
        fontType: 'truetype',
        // 更多配置...
    });
    
    // 添加字形
    glyphs.forEach(glyph => {
        glyphr.add_glyph(glyph);
    });

    // 生成字体文件
   const fontFiles = await glyphr.generate();
    return fontFiles;
}

const fontFiles = await generateFont(parsedSVGs);
console.log(fontFiles); // 输出生成的字体文件
  1. 生成CSS文件
// 生成CSS规则
function generateCSS(fontFiles) {
    let cssContent = '';
    fontFiles.forEach((file, index) => {
        const className = `icon-${index}`;
        cssContent += `
        .${className}:before {
            content: "\${file.unicode}"; // Unicode值
            font-family: 'MyIconFont';
        }
        `;
    });
   return cssContent;
}
const cssContent = generateCSS(fontFiles);
console.log(cssContent); // 输出CSS内容
  1. 打包输出
// 写入文件系统
function writeFiles(fontFiles, cssContent, outputDir) {
    fs.mkdirSync(outputDir, { recursive: true });

    fontFiles.forEach(file => {
        fs.writeFileSync(path.join(outputDir, file.name), file.content);
    });

    fs.writeFileSync(path.join(outputDir, 'icons.css'), cssContent);
}
writeFiles(fontFiles, cssContent, 'output');
avatar
文章
阅读
粉丝