关于fusion icon的svg脚本自定义

lilithyang2018 commented 7 months ago

          这个 js 请求并不是 css 中发起的，fusion 的 Icon 组件会默认加载 svg 相关的脚本，这个脚本可以自定义路径，详见 https://ice.work/component/icon#%E4%BD%BF%E7%94%A8%E5%85%B6%E4%BB%96%E6%BA%90%E7%9A%84%E5%9B%BE%E6%A0%87

Originally posted by @ClarkXia in https://github.com/alibaba/ice/issues/3508#issuecomment-689958046

@ClarkXia 这个链接已经不能访问了找了一下ice源码的一些分支，没有看到相关的md文件

lilithyang2018 commented 7 months ago

现在正在尝试fusion icon的本地化使用的是ice3 以下是相关配置

import { defineConfig } from '@ice/app';
import icestark from '@ice/plugin-icestark';
import request from '@ice/plugin-request';
import store from '@ice/plugin-store';
import fusion from '@ice/plugin-fusion';
import webpack from './plugins/plugin-webpack';
import moment from '@ice/plugin-moment-locales';
import cssAssetsLocal from '@ice/plugin-css-assets-local';
// @ts-ignore
import NodePolyfillPlugin from 'node-polyfill-webpack-plugin';

export default defineConfig(() => ({
    ssr: false,
    ssg: false,
    minify,
    codeSplitting: false,
    define: {
        'process.env.DEV_ENV': JSON.stringify('production'),
        'process.env.COOKIE_PREFIX': JSON.stringify(process.env?.COOKIE_PREFIX),
    },
    routes: {
        ignoreFiles: ['customize/**'],
        defineRoutes: route => {
            route('/', 'layout.tsx', () => {
                route('/projects', 'customize/Projects/index.tsx');
                route('/templates', 'customize/Templates/index.tsx');
            });
        },
    },
    externals: {
        'react': 'var window.React',
        'react-dom': 'var window.ReactDOM',
        'prop-types': 'var window.PropTypes',
        'alifd/next': 'var window.ReactDOM',
    },
    plugins: [
        icestark({ type: 'child' }),
        request(),
        store(),
        fusion({
            importStyle: 'sass',
            themePackage: '@alifd/theme-1',
            theme: {
                'icon-font-path': JSON.stringify('@/assets/icon-font/icon'),
                'font-custom-path': JSON.stringify('./assets/font/'),
            }
        }),
        cssAssetsLocal({
            outputPath: 'assets',
            relativeCssPath: '../',
            enableInDev: true,
        }),
        moment({ locales: ['en-US'] }),
        webpack(),
    ],
    webpack: (config) => {
        config.plugins?.push(new NodePolyfillPlugin() as any);
        return config;
    },
}));

lilithyang2018 commented 7 months ago

按以上配置了icon-font-path之后仍然会出现js中去请求阿里cdn的js资源的情况，相关的资源文件在public目录和src目录各备有一份

ClarkXia commented 7 months ago

可以现在源码里试下 $icon-font-path 是否正常被替换，最好提供复现 demo 供排查

lilithyang2018 commented 7 months ago

排查完毕是某个依赖中的scriptUrl使用了硬编码导致的

alibaba / ice

关于fusion icon的svg脚本自定义 #6811